Question

我想要浅蓝色背景为身体和纯红色div。不知何故身体不透明效果影响我的内容div不透明度，所以我没有得到纯红色的div，但是而是变得不透明。

<html>
   <title>............Generic............</title>
   <head>
      <style>
         #myContent {
         position:relative;
         background: blue;
         height:630px;
         width:1080px;
         left:150px;
         right:50px;

         border-radius:4px;
         }

        #header {
        position:relative;
        left:-10px;
        right:30px;
        top:50px;
        background: red;
        width:600px;
        height:100px;


        }

        #myContent:not(#header) {
        opacity:0.1;
        }


      </style>
      <script></script>
   </head>
   <body onload="myFun()">
      <div id="myContent">
        <div id="header">
        </div>

      </div>
   </body>
</html>

Answer 1

不要同时使用backgroung-color和opacity，只需使用RGB背景颜色。

将background-color: rgba(0,0,255,0.1);添加到#myContent并完全删除#myContent:not(#header)。

<强> Check Fiddle Demo

防止孩子继承父母的不透明度

1 个答案: