css父元素半透明，不影响子元素（兼容IE）

最新推荐文章于 2025-03-27 09:38:45 发布

原创最新推荐文章于 2025-03-27 09:38:45 发布 · 817 阅读

CC 4.0 BY-SA版权

博客介绍了CSS中设置元素透明度的方法。使用opacity设置透明度时子元素也会受影响，可采用background:rgba写法。rgba包含红、绿、蓝和Alpha透明通道。此外，还提到IE8及以下不兼容rgba，可使用IE渐变滤镜实现元素透明背景。

opacity:1.0可以设置透明度，但是其子元素都会带有同样的透明度，那么我们可以换一种写法：background:rgba(0,0,0,0.5)

rgba呢，就是red+green+blue+alpha，也就是红+绿+蓝+Alpha透明的颜色。

黑色半透明：

 .main{
        width: 100px;
        height: 100px;
        background: rgba(0, 0, 0, 0.5);
      }

在这里插入图片描述
白色半透明：

 .main{
        width: 100px;
        height: 100px;
        background: rgba(225, 225, 225, 0.5);
      }

在这里插入图片描述

但是IE8及其以下是不兼容rgba的，如果需要兼容IE

我们可以使用IE渐变滤镜，可以使所有主流浏览器下元素都实现50%透明的黑色背景：

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