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

最新推荐文章于 2024-06-19 20:49:09 发布

仙女叔叔

最新推荐文章于 2024-06-19 20:49:09 发布

阅读量5.2k

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_52070860/article/details/124374739

版权

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

仙女叔叔

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS的opacity设置背景透明，字体不透明

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

扫一扫