rgba與opacity的區別以及在遮罩層的運用

兩者的區別

如標題所示，今天我們談談rgba和opacity有什么區別？

這次我又來做一次搬運工了，哈哈(●'◡'●)

RGBA是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha的色彩空間。

R：紅色值。正整數 | 百分數

G ：綠色值。正整數 | 百分數

B ：藍色值。正整數| 百分數

A ：透明度。取值0~1之間

此處的a代表透明度，我們再來看看opacity ( •̀ ω •́ )y

opacity 屬性設置元素的不透明級別。

value：規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。

這么看來，兩者都是透明度的設置，可是實際用起來卻不一樣。

經過實戰，我們會發現設置了opacity的元素內的子元素們都被影響了，設置了opacity的元素它的子元素都繼承了他的設置，透明度都是一樣的。

而rgba所設置的透明度，只會影響他自己本身，而其中的子元素不會被其所影響。

如何應用

看到了rgba的特性，我們想到了什么？

沒錯！就是遮罩層！

就是那種彈框之后的透明深色背景，很炫的那種(●'◡'●)

直接上代碼：

 

html:

<div class="shade">   <!-- 這是遮罩層-->

　　<div class="pop_up">這是彈框</div>

</div>

 

css:

　　.shade{

　　　　width: 100%;

　　　　height: 100%;

 　　　  background: rgba(0,0,0,.8);   <!--黑色背景，透明度為0.8-->

　　　　position: fixed;      <!--固定全屏大小-->

　　　　top: 0;

　　　　left: 0;

 　　　  z-index: 10;

　　}

 

 

以上就是我的理解以及我在應對遮罩層的時候所使用的方法，如果你有更好的辦法或者對我的方法有什么建議，歡迎留言(●'◡'●)