opacity和rgba的区别？透明度？（css）

最新推荐文章于 2023-04-06 10:16:08 发布

weixin_43677787

最新推荐文章于 2023-04-06 10:16:08 发布

阅读量277

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43677787/article/details/122532104

版权

/*css*/
.left-wrap {
      width: 200px;
      height: 200px;
      border: 2px solid #0f0;
      opacity: .1;
      /* opacity: 0.9 */
    }
    .right-wrap {
      width: 300px;
      height: 300px;
      border: 2px solid #f00;
      background-color: rgba(0, 0, 0, .1);
      /* background-color: rgba(0, 0, 0, .9); */
    }
     .item1 {
      background-color: #00f;
      margin-bottom: 10px;
    }
   /*html*/
   <div class="outer-box">
    <div class="left-wrap">
      opacity
      <ul>
        <li class="item1">我是opacity的子元素</li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
      </ul>
    </div>
    <div class="right-wrap">
      background-color: rgba()
      <ul>
        <li class="item1">我是rgba的子元素</li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
      </ul>
    </div>
  </div>

当opacity和rgba都设置为0.1时，
效果：
在这里插入图片描述

当opacity和rgba都设置为0.9时，
效果：
在这里插入图片描述

opacity和rgba的区别？

当父元素设置opacity时，子元素会继承父元素的opacity（子元素会和父元素设置成一样的opacity）。
当父元素设置rgba时，子元素不继承（对子元素没有影响）。
opacity 0.0(完全透明) - 1（不透明），rgba是数值越大，颜色越亮。
opacity对边框也会有影响，rgba只对背景色有影响，其他没有。
相同点：取值范围都是0 - 1。
rgba应用于：background-color（背景颜色） , color（字体颜色） , border-color （边框颜色）, text-shadow（给文本添加阴影） , box-shadow（是给元素块添加周边阴影效果）,