CSS的opacity设置背景透明，字体不透明

opacity属性会使子元素也生效，而且子元素再设置opacity：1；是没有作用的；<body><div class="demo"><div class="a">woshi213sdfdf</div></div></body><style>.demo {background-color: burlywood;op

仙女叔叔

5102人浏览 · 2022-04-24 09:00:57

仙女叔叔 · 2022-04-24 09:00:57 发布

opacity属性会使子元素也生效，而且子元素再设置opacity：1；是没有作用的；

<body>
  <div class="demo">
    <div class="a">woshi213sdfdf</div>
  </div>
</body>
  <style>
    .demo {
      background-color: burlywood;
      opacity: 0.5;
    }

    .a {
      opacity: 1;
    }
  </style>

这里子元素里面是透明度依然是0.5

实现设置背景透明，子元素不透明可以不设置opacity，将opacity并入到颜色rgb里，也就是rgba

<body>
  <div class="demo">
    <div class="a">woshi213sdfdf</div>
  </div>
</body>
  <style>
    .demo {
      background-color: rgb(222, 184, 135, 0.5);
    }
  </style>