css中，如何设置前景色的透明度？

作者&投稿：官凯（若有异议请与网页底部的电邮联系）

CSS中背景颜色透明度如何设置？~

透明度的话ie下用filter:alpha(opacity=50);范围0到100，非ie下用opacity:0.5,范围0到1

可以使用option，输入0-1的小数

1、准备好初始化的代码

<html>

<head>

<style>

</style>

</head>

<body>

</body>

</html>

2、初始化样式

div{

border:1px red solid;

width:800px;

height:800px;

background-color:blue;

}

3、运行结果为

4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,0.5);

5、运行结果为

透明原理：把背景颜色设置为rgb的方式，然后再加一个透明度就可以设置为半透明了。

注意：设置背景颜色时哪里应该写成rgba。

一、首先HTML布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>

二、没有加CSS的样式的效果显示：

三、加CSS样式的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
<style type="text/css">
.box {
width: 700px;
height: 350px;
margin: 0 auto;
color: white;
background-color: orange;
/*color: orange; 这个方式从视觉上是透明了的，原理就是把文字颜色设置成与背景颜色一样有局限性双击看得到文字 */
color: transparent; /*根上面方法一样双击看得到文字比上面好推荐*/
}

</style>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>

在开发工具里面的截图：

四、加了CSS样式的效果图：

alpha是来设置透明度的。先来看一下它的表达格式：
filter：alpha（opacity=opcity，finishopacity=finishopacity，
style=style，startX=startX，startY=startY，finishX=finishX，
finishY=finishY）

哇，怎么这么长。是啊，不过这些参数都各有其用。
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。

实现上面这种效果的代码如下：

<html>
<head>
<title>alpha</title>
<style>//*定义CSS样式*//

</style>
</head>
<body>
<div>
<p style=“font-size：48；font-weight：bold；color：red；”>
Beautiful </p>//*定义字体属性，前景色为红色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*导入一张图片*//
</body>
</html>

css控制透明度倒不麻烦。
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/

举个例子：
通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
#test{
background-color:#0000CC;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
width:100px;
height:100px;}

但是还是会有很多问题，浏览器兼容性问题，等
而且IE滤镜的频繁使用会使浏览器的执行效率降低。

所以不提倡过多使用。

也还有其他方法可以模拟，比如用宽高都是1px的透明png图片覆盖等等。

/**************************************************/
LZ自己举一反三啊，前景色不就是color么
#test{
background-color:#000}
#test span{
color:#fff;
zoom:1 /*触发IE下块级元素*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
<div id="test"><span>前景色透明度</span></div>

LZ看看“前景色透明度”这几个字是不是纯白色，还是白色的50%透明。

把类为box的层设为透明。
<div class="box"></div>
<style>
.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}
</style>
其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是所需要的一切如果所有的浏览器都支持目前的标准。
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/

-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/

如何设置在电脑的时间日期栏显示自定义的文字?
操作方法为：1、单击：开始---设置---控制面板---区域和语言选项---自定义---时间，在时间格式栏中的 H:mm:ss前加两个tt，使之变成：ttH:mm:ss。2、如果你想让你的名字在时间的后面显示你可以把tt打在后面 H:mm:sstt，之后在AM符号(M):里打上你的名字;在PM符号(P):里也打上你的名...

求实况足球8实用技巧,战略。
4 四三三的跑位，四三三有两种跑位，一是两边前锋向边路进攻方向，前腰和中锋设定向前，边后卫设定向前，需要边锋，边后卫传中能力好，中锋抢点厉害。适合球队荷兰。一是两边锋设置位置靠中为速度型前锋进攻方向互相交叉向前，中锋不设定进攻方向，前腰设置向前，待边锋吸引防守火力后中路施射，或直传S...

问下,SS释放诅咒的同时让宠物去攻击,这个宏该如何设置
\/script PetAttack();\/施放腐蚀术(等级 6)腐蚀术(等级 6) 不过是举例,你可以换其他诅咒

怎么在时间前面加字?
如果要把名字写在时间后面,把tt加在 H:mm:ss后面就行了。问题六：在XP系统中,怎么在右下角时间前面加字? 控制面板－区域和语言选项－自定义－时间时间格式为“tt HH:mm功ss”AM符号和TM符号都改成你的名字确定－应用－确定－退出问题七：表格中，设置的时间自动更新，如何在时间前面加上...

魔兽世界。如何设置技能快捷键
按Esc，菜单里面有个键位设置主要说下有特殊快捷键，那是DZ潜行，ZS姿态，QS光环的快捷还有个副快捷键，那是LR，SS等有宝宝职业设置的，是宝宝技能的快捷设置。魔兽世界技能快捷键如何设置?1、首先打开大脚插件，进入设置。选择下图中的技能触发。选择右侧的配置。把下图中的勾选项取消就可以了。2、首先...

魔兽世界SS 宏
15 前距离\/console SET targetNearestDistance "36" 将“TAB”能选定目标的最远距离改为50码。(我自己选择设置的为36码)16 后距离\/console SET targetNearestDistanceRadius "36"将“TAB”能选定身后目标的最远距离设为50码,不过并不推荐这么做,20就够了。(我自己选择设置的为36码)17 亡灵意志\/targetlast...

第一次使用OutlookExperss收发邮件前首先应该做的工作是
选择B，设置邮箱的POP3和SMTP协议。OutlookExpress不是电子邮箱的提供者，只是作为收、发、写、管理电子邮件的工具。其工作模式是通过设置简单邮件传输协议 (SMTP)、邮局协议 3(POP3)和Internet邮件访问协议(IMAP)来达成邮件的传输。通常我们在某个网站注册了自己的电子邮箱后，要收发电子邮件，须登入该网站...

有没有人用华硕AC68U路由器的,怎么设置挂ss
1.在浏览器中输入192.168.1.1（可能是其他的，路由器铭牌上有标注）；2.输入账号和密码。（账号、密码在路由器铭牌上有标注）；3.点击左侧导航栏中“设置向导”，点击“下一步”；4.选择“PPPoE”模式，点击下一步；5.输入宽带账号和密码（办理网络的时候，运营商给的账号和密码），点击下一步；...

请问如何设置SS首页和相关频道页面多长时间刷新一次
你可以在计划任务里将更新时间设置一下，不过启用缓存是为了减轻服务器负担，没有必要随时更新的。查看原帖>>

Sp ss数据视图中录入数据都是文字怎么改成数字
设置旧值和新值。1、打开spss，输入两列数据。2、点击转换、重新编码为不同变量。3、选择字符串变量，设置新变量的名称和标签，点击旧值和新值。4、设置旧值第一列的新值为1，旧值第二列的新值为0，点击继续。5、在转换窗口中点击确定，返回数据视图即可看到转换后的数字。

青山湖区15528835692： css中,如何设置前景色的透明度? - ？
除陆康斯： css控制透明度倒不麻烦. filter:alpha(opacity=50); /*IE滤镜,透明度50%*/ -moz-opacity:0.5; /*Firefox私有,透明度50%*/ opacity:0.5;/*其他,透明度50%*/ 举个例子: 通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试 #test{ background-color:#0000CC; ...

青山湖区15528835692： 在div+css中怎么让背景颜色透明 - ？
除陆康斯： css中有一个opacity属性,可以设置透明度如下例子:<!DOCTYPE html> <html lang=＂en＂> <head><meta charset=＂UTF-8＂><title>Document</title><style>.div1{width: 200px;height: 200px; opacity: 0.6;background: red;}</style> </head> <body><div class=＂div1＂></div> </body> </html>

青山湖区15528835692： css box - shadow 怎么设置透明度 - ？
除陆康斯： 1、首先打开html编辑器,新建一个html文件,在文件内写入两个div,设置它们的样式为div1和div2:2、然后分别设置两个div的样式,给它们相同的高度和宽度以及颜色,最后设置box-shadow属性,这里的颜色使用rgba来设置,最后一个属性好就是设置透明度的,其中一个设置1另一个设置0.5即可:3、最后在浏览器中观察两个div的阴影样式,下面的明显比上面的要淡一些.以上就是css中box-shadow设置透明度的办法:

青山湖区15528835692： 请问:怎样用CSS来设置网页背景图片的透明度? - ？
除陆康斯： 单纯从你的想法是做不到的,但是你可以这样: 把图片背景从原来的位置分离到一个div里面去,这个div大小和原先背景图片的尺寸一样大小,这个div设置透明度

青山湖区15528835692： CSS怎么设置图片前景色 ? - ？
除陆康斯： 你是想改图标颜色吗?那css是不行的,那是图片,如果是背景色的话,css倒是可以办到

青山湖区15528835692： 网页中怎么使用css设置背景的透明度网页中 ?网页中怎么 ？
除陆康斯： 请采纳我的答案. 既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了.当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和opacity,这样的话就成了两者的混合了.你可以把上面的例子下载过来,然后/*opacity:.5;*/的注释看看

青山湖区15528835692： 怎样在CSS样式中,设置背景的透明度呢? ？
除陆康斯： 删除body{}内的背景颜色,如#000000,然后加入.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%},调整opacity增减透明度,一般时需要删除左背景图#header div.lc{} 右背景图#header div.rc{} TAB菜单主体#tab{background:#000000} 左下角背景.modbl{} 中下角背景.modbc{} 右下角背景.modbr{}

青山湖区15528835692： css中如何设置透明度? - ？
除陆康斯： 怎样在CSS样式中设置背景的透明度,下面一个具体的实例.把类为box的层设为透明. <div class=＂box＂></div> <style> .box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0....

青山湖区15528835692： css3如何加前景色 - ？
除陆康斯： 一、首先HTML布局:<!DOCTYPE html><html lang=＂en＂><head><meta charset=＂UTF-8＂><title>css设置前景色透明</title></head><body><div class=＂box＂>我是一段文字</div></body></html> 二、没有加CSS的样式的效果显示:三、加...

青山湖区15528835692： 网页中怎样使用css设置背景的透明度？
除陆康斯： 2楼正解,style#test{width320px;background:url(背景地址);opacity:0.7;filter:alpha(opacity=70)}div id=test这个DIV是有背景图片的哦/div

你可能想看的相关专题

星空见康网

css中，如何设置前景色的透明度？

你可能想看的相关专题