描述：
外面大的div背景颜色为，里面小的div的背景颜色为红色，现在我们需要设置大的div的背景颜色变成半透明状态，我们将opacity的属性值设为05，代码如下：
HTML部分：
1
2
3
我是内容
CSS部分：
1
2
3
4
5
6
7
8
9
10
11
aa{
width: 250px;
height: 250px;
background: yellow;
opacity: 05;
}
bb{
width: 150px;
height: 150px;
background: red;
}
背景颜色的确变成了半透明，但是里面小div的背景以及文字都变成半透明了，这可能不是我们想要的效果，所以我们一般不使用这种方法。当然了，如果在页面布局时，你希望div里面所有的都变透明，就用opacity。
接下来我们用另一种方法，background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。
HTM部分一样，只需要将opacity换成rgba即可。
代码如下：
1
2
3
4
5
6
7
8
9
10
aa{
width: 250px;
height: 250px;
background-color: rgba(255,255,0,05);
}
bb{
width: 150px;
height: 150px;
background: red;
}
大的div透明度改变以后，对里面的背景和文字都没有任何影响。所以我们一般用background-color:rgba(0,0,0,0~1)来设置背景颜色透明。
1、首先打开html编辑器，新建一个html文件，在文件内写入两个div，设置它们的样式为div1和div2：
2、然后分别设置两个div的样式，给它们相同的高度和宽度以及颜色，最后设置box-shadow属性，这里的颜色使用rgba来设置，最后一个属性好就是设置透明度的，其中一个设置1另一个设置05即可：
3、最后在浏览器中观察两个div的阴影样式，下面的明显比上面的要淡一些。以上就是css中box-shadow设置透明度的办法：
1、准备好初始化的代码
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>
2、初始化样式
div{
border:1px red solid;
width:800px;
height:800px;
background-color:blue;
}
3、运行结果为
4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,05);
5、运行结果为
透明原理：把背景颜色设置为rgb的方式，然后再加一个透明度就可以设置为半透明了。
注意：设置背景颜色时哪里应该写成rgba。
设置元素的透明度：-moz-opacity:08; /在Firefox中设置元素透明度
filter: alpha(opacity=80); /ie使用滤镜设置透明
但是当我们对一个标签设置背景的透明度时，往往我们并不希望该标签上的文字也变成半透明了。
例如：
<div><p>不透明</p></div>
div{-moz-opacity:03;filter:alpha(opacity=30);background:#000;width:500px;
height:500px;color:#F30; font-size:32px; font-weight:bold; }
可以很明显的看出文字也被半透明的，这是我们不想看到的效果。
以前我曾经是绝对定位的方法解决这个问题，也就是现在的p并不是div的子元素。
<div></div>
<p>不透明</p>
这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。
但是很多时候这样的标签并不是很合理，有可能还会多浪费几个标签。
下面的这种方法就可以解决上面的问题了：
div{background:rgba(0,0,0,02) none repeat scroll !important; /实现FF背景透明，文字不透明/
background:#000; filter:Alpha(opacity=20);/实现IE背景透明/
width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
div p{ position:relative;}/实现IE文字不透明/<div style="height: 60; background-color: red; filter:alpha(opacity=20);">meizz</div>
alpha 透明滤镜
使用CSS的Chroma滤镜可以把字体颜色设置为透明样式。
<style type="text/css">
<!--
body{background-color:#999999;}
/滤镜中设置的颜色要和字体的颜色相同/
#tm{color:#FF0000;filter:chroma(color=#FF0000)
}
-->
</style>
将Chroma滤镜的颜色和字体的颜色设置为相同时，不论网页的背景颜色如何设置，字体的颜色都会显示为透明。
在浏览器中查看使用CSS滤镜把字体的颜色设置为透明的显示效果。如下图所示：
1css3新增的一个属性rgba,语法
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
2设置透明度是不会被继承的，所以不用头疼继承的问题字体透明度便设置成color:rgba(0,0,0,05);边框：border:5px solid rgba(0,0,0,05);或者背景都可以。
3兼容性。支持ie9及以上的浏览器
4css2中opacity制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就有心无力了。
5二者区别opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚。但是rgba不存在这种问题。
6比如做一个背景的透明度，那么
div{background:rgba(0,0,0,05);width:100px;height:100px;color:red;}
div1{background:#000;width:100px;height:100px;color:rgba(255,255,255,05)}
</style>
<div class="div">
我是文字
</div>
<div class="div1">
我是变透明的文字
</div>
文字不会被影响的。
7如果需要设置字体的透明度，可以对color的rgba属性进行设置。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）