CSS3:RGBA值设置元素的不透明度(css透明背景色)

浏览器参照基准:Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE9.0 and Later

 CSS3 RGBA值设置元素的不透明度(css透明背景色).jpg

1
background-color:rgba(0,0,0,.7); /*黑色*/
2
background-color:rgba(255,255,255,.7); /*白色*/

代码演示:

样式表内容

1
.red {background-color:rgba(0,0,0,.5); /*红色半透明*/}

html部分

1
<div class="red">红色半透明演示</div>

“,”(小逗号)前的数值分别是RGB值,PS、DW都有如图。后面小写点后面的数字可设置(0-9)为透明度,数值越小透明度越低。
本代码的作业用让本选择器应用的透明效果,没有继承,就像你给选择器设置背景图片一样不会影响其它的选择器。

而 opacity:1.0; 却会影响所有内嵌选择器,则如div内所有元素都透明

如果你还要兼容IE6/IE7/IE8请阅读:https://yijile.com/log/334.html