css:opacity影响子元素透明度

最新推荐文章于 2024-08-11 17:46:23 发布

帅比九日

最新推荐文章于 2024-08-11 17:46:23 发布

阅读量803

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_41883423/article/details/105714230

版权

踩过的坑专栏收录该内容

159 篇文章

订阅专栏

问题：为父元素设置opacity做透明效果时。子元素会继承这个属性导致子属性也有透明效果。

<body>
     <div class="parent">
         <div class="child"></div>
     </div>
 </body>
 <style>
     .parent{
         width: 200px;
         height: 200px;
         background-color: #000;
         filter:alpha(opacity=50); /* IE */
         opacity:0.5
     }
     .child{
         width: 100px;
         height: 100px;
         background-color: red;
     }
 </style>

在这里插入图片描述
解决：放弃opacity，使用rgba来做透明效果。

 <body>
     <div class="parent">
         <div class="child"></div>
     </div>
 </body>
 <style>
     .parent{
         width: 200px;
         height: 200px;
         background-color: rgba(0,0,0,0.5);/*最后一项即为透明度*/
     }
     .child{
         position: relative;/*为了兼容IE8*/
         width: 100px;
         height: 100px;
         background-color: red;
     }
 </style>