rgba()和opacity的区别

最新推荐文章于 2024-06-15 06:21:07 发布

zhangzhendyx

最新推荐文章于 2024-06-15 06:21:07 发布

阅读量125

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44357814/article/details/126250265

版权

在进行页面布局时，为了呈现不同的效果，需要设置不同的透明度,opacity和rgba都可以实现

opacity

取值范围0-1

opacity:0.3

rgba

r,g,b,a==>red,green,blue,alpha透明度

区别：

opacity有继承性；opacity作用于元素，以及元素内所有的内容

会将不需要设置透明度的内容也变成透明色

<div class="box1">
     box1
    <div class="box2">
         box2
    </div>
</div>

.box1 {
            width: 200px;
            height: 100px;
            background-color: pink;
            opacity: 0.3;
        }
 .box2 {
            width: 50px;
            height: 50px;
            background-color: #01a76f;
        }

rgba则不同，只作用于元素颜色或背景颜色

 <div class="box11">
      box11 rgba
      <div class="box22">
           box22
      </div>
   </div>

.box11 {
            width: 200px;
            height: 100px;
            background: rgba(47, 169, 72, 0.3);
            /* red,green,blue,alpha[0-1]透明度 */
        }

.box22 {
            width: 50px;
            height: 50px;
            background-color: pink;
        }