CSS3中的opacity属性使用教程.docx

CSS3中的opacity属性使用教程CSS3中的opacity属性使用教程导语：css3中的属性繁多，其中就有一种opacity的属性，你知道吗？下面的是百分网小编为大家搜集的CSS3中的opacity属性使用教程，希望对你能有所帮助。RGBA和opacity语法:R：红色值。正整数|百分数G：绿色值。正整数|百分数B：蓝色值。正整数|百分数A：透明度。取值0~1之间CSSCode复制内容到剪贴板/*IE6-8*/filter:alpha(opacity=80);/*其他*/opacity:0.8;RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。opacity的`使用opacity声明用来设置一个元素的透明度：层、文字、图片等…一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。浏览器兼容性opacity是浏览器支持最好的一个CSS3元素…当然，除了IE!CSS3透明(例1：层)2015819172429187.jpg(600×100)上面的透明例子使用了下面的样式：CSSCode复制内容到剪贴板p.opacityL1{background:#036;opacity:0.2;width:575px;height:20px;}p.opacityL2{background:#036;opacity:0.4;width:575px;height:20px;}p.opacityL3{background:#036;opacity:0.6;width:575px;height:20px;}p.opacityL4{background:#036;opacity:0.8;width:575px;height:20px;}p.opacityL5{background:#036;opacity:1.0;width:575px;height:20px;}浏览器支持：Firefox3.05+GoogleChrome1.0+InternetExplorer8-Opera9.6+Safari3.2.1+CSS3透明(例2：图片)2015819172448337.jpg(600×180)我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上，实现一种链接的鼠标经过效果。CSSCode复制内容到剪贴板img.opacity1{opacity:0.25;width:150px;height:100px;}img.opacity2{opacity:0.50;width:150px;height:100px;}img.opacity3{opacity:0.75;width:150px;height:100px;}浏览器支持：Firefox3.05+GoogleChrome1.0.154+InternetExplorerIE8-Opera9.6+Safari3.2.1+