详解CSS3的opacity属性设置透明效果的用法

详解CSS3的opacity属性设置透明效果的⽤法

CSS3 opacity 属性的功能是⽤来控制⽹页元素的透明效果（调整不透明度），早期⽹页设计常常会⽤到许多的透明效果，通常都是透过 png 图层来制作透明的感觉，现在⽹页设计师可以使⽤ CSS3 opacity 属性来轻松的达到⽹页元素不透明度的调整，CSS3 opacity 属性的语法⾮常简单，只需要透过数字的调整，就能呈现出不同的不透明度，进⽽设计出相当具有现代感的⽹页风格，可应⽤在⽹页图⽚、DIV 区块、span 区域、Table 表格 ... 等元素，所有新版的主流浏览器都⽀援 CSS3 opacity 属性的效果。

CSS3 opacity 属性基本语法

opacity: 不透明度;

CSS3 opacity 属性参数的＂不透明度＂是以数字表⽰，从 0.0 ⾄ 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，换句话说，数字越⼤代表元素越不透明。参数除了可以使⽤＂不透明度＂之外，还有 inherit 继承⽗层属性，不过浏览器⽀援度较差，不建议使⽤。

自动排污阀CSS3 opacity 属性实际范例

止痒水CSS Code复制内容到剪贴板

1. <div >

2. 测试 CSS3 opacity 属性的不透明度处理

3. </div>

4. <div >

5. 测试 CSS3 opacity 属性的不透明度处理

6. </div>

7. <div >

8. 测试 CSS3 opacity 属性的不透明度处理

9. </div>

范例的输出效果

范例共准备了三个加⼊ opacity 效果的 DIV 区块，各位可以注意到从最上⾯开始的第⼀个区块，不透明度为

0.1（opacity:0.1）所以整个区块变成⼏乎快看不到颜⾊与⽂字，第⼆个区块不透明度设为 0.5（opacity:0.5），所以⽐第⼀个区块清楚多了，第三个区块再度降低不透明度到 0.8，⽂字与背景颜⾊都越更加明显，这就是 CSS3 opacity 属性的实际效果，由范例可以很清楚的看到，⼀个 DIV 区块内的⽂字内容与背景颜⾊（background-color）都会受到 opacity 属性的不透明度影响。

补充：⽬前新版的主流浏览器均有⽀援 CSS3 opacity 属性，但需要注意的是 IE8 以即更早版本的 IE 浏览器必须使⽤替代语法来实做，所谓的替代语法是利⽤ filter 属性，写法如「filter:Alpha(opacity=50);」，效果等于「opacity:0.5」。

opacity透明度属性的继承问题

CSS3的opacity透明度属性具有继承性，当对某个对象设置了opacity透明度属性的时候，其⼦集元素也会有透明度效果；XML/HTML Code复制内容到剪贴板

1. <div class="main">做指挥中心控制台

2. <div class="div1">

3. <p>背景⾊为rgb的opacity效果</p>

4. </div>

5. <div class="div2">

6. <p>背景⾊为rgba的透明效果</p>

7. </div>

8. </div>

CSS：

CSS Code复制内容到剪贴板

1. .main{

2. clear:rightright;

3. margin:20% auto;

4. overflow:hidden;

5. width:335px;

6. }

7. .main div{

8. color:red;

9. float:left;

10. display:inline-block;

11. width:160px;

12. height:160px;

13. text-align:center;

14. }

15. /*使⽤opacity透明属性的显⽰效果*/

16. .div1{background-color:rgb(0,0,0);

17. opacity:0.5;

18. filter:alpha(opacity=50);

19. -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';margin-right:15px;

20. }

21. .div1 p{

22. position:relative;

mide-008

磁石电话机23. }

24. /*使⽤rgba⾊显⽰的效果*/

有源带通滤波器25. .div2{

26. background:rgba(0,0,0,.5)

27. }

总结：使⽤rgba的背景⾊可以很直接的设置对象的透明度效果，⽽且对其⼦集元素没有继承性；⽽使⽤rgb⾊并设置opacity透明度属性的对象却产⽣了透明度继承。

不过，可能你把整个代码都copy下来并在IE9以下的浏览器都测试的话，你会发现在IE7、IE8浏览器中出现了设置opacity透明度属性的对象中⼦集元素并没有继承⽗集元素的透明度效果，并且设置了背景⾊为rgba的对象反⽽没有任何效果。这是因为：在设置了opacity透明度属性的对象中的⼦集元素设置了position:relative属性，这才使得它在IE9以下的浏览器中得到了解决；其次在IE9以下的浏览器并不兼容rgba⾊，所以，你会看到第⼆种的背景⾊没有效果。

本文发布于:2024-09-22 14:25:26，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/4/214235.html

上一篇：压缩天然气加气母站工艺设计方案

下一篇：p型薄膜晶体管(TFT)的研究进展

标签：属性透明度效果

留言与评论（共有 0 条评论）