ie8下的透明问题

最新推荐文章于 2022-08-26 18:32:43 发布

「已注销」

最新推荐文章于 2022-08-26 18:32:43 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/yunkou/p/4231703.html

本文详细介绍了在CSS3中实现背景色透明和整体透明的方法。针对背景色透明，使用rgba颜色模型并通过调整Alpha通道来实现不同等级的透明效果；对于整体透明，则采用opacity属性。此外，还提供了针对IE浏览器的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

团队里经常遇到，索性整理一起

是我们在前端开发中经常遇到的，在问题中经常遇到的两个问题是背景色透明和整体透明

先说下背景色透明，背景色透明，在现代浏览器中，可以用rgba颜色作为背景色。
简单介绍下rgba色，这个是在css3 出现的标准。所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。通过改变a的值来改变透明度。

background:rgba(200, 54, 54, 0.5);

这个颜色就是透明度为0.5的颜色背景，

如何处理兼容如果想要IE也支持颜色透明，那就要动用IE的私有滤镜
FILTER:progid:DXImageTransform.Microsoft.Gradient

兼容写法实例：

background:rgba(0,0,0,0.5); 
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

这里的7F是十六进制的表达方式，00 为最小的透明度（完全透明）FF为最大透明值（完全不透明）

下面说下整体透明
整体透明区别于背景色透明就是整个元素的都是透明的，在css3新的标准中为
opacity: .5;

兼容IE的写法

/* IE 4-9 */  
filter:alpha(opacity=50);  
/*This works in IE 8 & 9 too*/  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
/*IE4-IE9*/  
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

转载于:https://www.cnblogs.com/yunkou/p/4231703.html