rgba与opacity的区别

发表于 | 分类于 | | 阅读次数:
rgba与opacity的区别以及在遮罩层的运用,设置了opacity的元素内的子元素们都被影响了，设置了opacity的元素它的子元素都`继承了他的设置`，透明度都是一样的.而rgba所设置的透明度，只会影响他自己本身，而其中的子元素不会被其所影响。

rgba与opacity的区别以及在遮罩层的运用

两者的区别

如标题所示，今天我们谈谈rgba和opacity有什么区别？

这次我又来做一次搬运工了，哈哈(●’◡’●)

RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。

R：红色值。正整数 | 百分数

G ：绿色值。正整数 | 百分数

B ：蓝色值。正整数| 百分数

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

此处的a代表透明度，我们再来看看opacity

opacity 属性设置元素的不透明级别。

value：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

这么看来，两者都是透明度的设置，可是实际用起来却不一样。

  • 经过实战，我们会发现设置了opacity的元素内的子元素们都被影响了，设置了opacity的元素它的子元素都继承了他的设置，透明度都是一样的。

  • 而rgba所设置的透明度，只会影响他自己本身，而其中的子元素不会被其所影响。

如何应用

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

没错！就是遮罩层！

就是那种弹框之后的透明深色背景，很炫的那种(●’◡’●)

直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;

　　}
感谢你的打赏哦！