opcity和background的rgba的区别

202 阅读2分钟

background rgba

R:红色值。正整数 | 百分数\
G:绿色值。正整数 | 百分数\
B:蓝色值。正整数 | 百分数\
A:Alpha透明度。取值0~1之间。
正整数为十进制0~255之间的任意值,百分数为0%~100%之间的任意值。

RGBA是在R(Red)G(Green)B(Blue)模式上增加了alpha通道,alpha通道是不透明度,
即,如果一个元素alpha通道数值为0%(或0),那该元素就是完全透明的(也就是看不见的,
但是可以透过该元素看到该元素下的元素),数值为100%(或255)时则意味着该元素完全不透明。


opacity
属性指定了一个元素的**不透明度**。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。

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

opacity

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

区别

background 的透明只是透明了元素的背景并没有改变元素里面的内容,但是opacity的透明是连元素的内容一起变成了透明
background-color 的 transparent 也是只改变了背景,并没有改变内容

image.png