RGBA 与 opacity不得不说的故事

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhy421202048/article/details/59763892

css中RGBA和opacity有着不同的使用情景和使用方法,但是有时候也有着相同的效果和功效,

相同:都可以改变透明度,

不同点:在MDN上opacity是这样介绍的:

当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。

这句话是什么意思那?
1、opacity在某个元素上时,那个就会作用于某个元素,

2、opacity会左右其子元素的透明度,不论他的子元素的透明度是多少,都会拥有和父元素相同的透明度

例如:

<div style="opacity:0;.....">

<div style="opacity:1;.....">111</div>

</div>

其实即便是里面的元素是不透明的,但是奈何父元素是透明的这样子元素也不会显示;

rgba 在MDN上

颜色可以使用 rgba() 函数符在红-绿-蓝-阿尔法(RGBa)模式下被定义。RGBa 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。
表示透明度:0=透明;1=不透明;

他俩的最大的区别就是rgba只是对颜色通道进行了操作,并不会操作dom的东西,

举个例子:

当我们需要对一个div的背景进行透明度的设置,用opacity会将div里面的所有的子元素都变成相同的透明度,而raba则只会对背景的颜色做调整,所以,在写透明度的时候,我们要三思后行;


展开阅读全文

没有更多推荐了,返回首页