CSS —— rgba与opacity的区别

rgbaopacity都可以设置元素的透明度。

两者的区别在于opacity会继承父元素的opacity属性,而rgba设置的元素,其后代元素不会继承父元素的不透明属性。

opacity

语法:opacity: value | inherit

value取值为0~1,0为完全透明,1为完全不透明;inherit表示此属性默认为可继承属性,所以子元素会继承父元素的opacity属性值,从而子元素和父元素达到相同的效果。

但是如果单独设置子元素的opacity的值会产生单独的效果,不过前提是属性值小于或者等于父元素的属性值,否则设置无效,而继承保持父元素属性值。

rgba

语法:rgba(r,g,b,a)

rgba函数在rgb颜色模式基础上增加了alpha通道,alpha通道是不透明度,这样可以在设置颜色的同时去设置透明度。alpha取值在0~1之间。

rgba只会对元素本身产生影响,因为无法继承,所以不会对子元素产生影响。

示例一:

<div class="case">
  <p>Opacity</p>
</div>
.case{
  background-color: gray;
  opacity: 0.5
}
.case p{
  opacity: 0.9
}

在这里插入图片描述
上例中使用opacity属性为父元素div设置透明度为0.5,因为opacity是继承属性,并且子元素p标签设置0.9透明度大于父元素透明度,因此子元素透明度不会生效,而是继承父元素透明度。

示例二:

.case{
  background-color: gray;
  opacity: 0.5
}
.case p{
  opacity: 0.2
}

在这里插入图片描述
上例中,给子元素设置的透明度0.2小于父元素透明度0.5,因此子元素透明度生效。

示例三:

.case{
  /*background-color: gray;
  opacity: 0.5*/
  background-color: rgba(151, 145, 145, 0.01)
}

在这里插入图片描述
上例中,使用了非继承性属性rgba设置父元素透明度,因此此元素不会受父元素透明度的影响。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页