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

太过爱你忘了你带给我的痛 2021-06-26 16:06 348阅读 0赞

### 两者的区别 ###

如标题所示，今天我们谈谈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:

css:

.shade{ 
    　　　　width: 100%;
    　　　　height: 100%;
     　　　 background: rgba(0,0,0,.8);   
    　　　　position: fixed;      
    　　　　top: 0;
    　　　　left: 0;
     　　　 z-index: 10;
    　　}

以上就是我的理解以及我在应对遮罩层的时候所使用的方法，如果你有更好的办法或者对我的方法有什么建议，欢迎留言(●’◡’●)

--------------------

## `rgba`和`opacity`区别 ##

首先来看`rgba`:

R：红色值。正整数 | 百分数
    G：绿色值。正整数 | 百分数
    B：蓝色值。正整数 | 百分数
    A：Alpha透明度。取值0~1之间。

再看`opacity`:

后面的取值为从 0.0 （完全透明）到 1.0（完全不透明）。

两者的区别：`opacity`会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

--------------------

## rgba 和 opacity 的对比 ##

rgba 中 的 a 指的是透明度:

1.  `rgba` 的 设置的 透明度 不会被子级 元素继承; `opacity` 设置的透明度会被子级元素继承 . 因此 ,有时候 使用 `rgba` 会比 `opacity` 效果更好;
2.  rgba 可以设置`background-color , color , border-color , text-shadow , box-shadow`,

实例: 在一个背景 上 ,设置 一个子背景 ,这个子背景 透明, 同时 子 背景中的内容不透明 .

### 1)使用 `opacity` . ###

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>opaciyt</title>
    
        <style type="text/css"> .bg-box { width: 200px; height: 200px; border: 1px solid #ccc; background: red; position: relative; } .bg { background: black; opacity: 0.5; filter:alpha(opacity=50); width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; z-index: 1; } .bg-content { width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; z-index: 10; } .bg-content p { padding: 5px 10px; color: white; font-size: 16px; } </style>
    </head>
    <body>
        <div class="bg-box">
          <div class="bg">  </div>
           <div class="bg-content">
              <p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>
            </div>
        </div>
    </body>
    </html>

这里 是个 `bg-content` 的 兄弟 节点 `bg` 加上 透明度 .

同时绝对定位 ,使得 `bg` 和 `bg-content` 重合 ;

同时 `bg` 的 `z-index` 要 小于 `bg-content` 的 `z-index` , 使得 `bg` 在 `bg-content` 下面.  
![在这里插入图片描述][20181125135123151.png]  
如果 不是上面的那样 ,而是 给 `bg-content` 的父级 加上透明度 , 那么 `bg-content` 就会继承透明度, `bg-content`中的内容 也会继承透明度. 这样就不是我们想要达到的效果了.

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>opaciyt-2</title>
    
        <style type="text/css"> .bg-box { width: 200px; height: 200px; border: 1px solid #ccc; background: red; position: relative; } .bg { background: black; opacity: 0.5; filter:alpha(opacity=50); width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; } .bg p { padding: 5px 10px; color: white; font-size: 16px; } </style>
    </head>
    <body>
        <div class="bg-box">
          <div class="bg">
               <div class="bg-content">
              <p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>
            </div>
          </div>
        </div>
    
    </body>
    </html>

--------------------

### 2) 使用 `rgba` ，`rgba` 定义的透明度不会被继承 ###

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>rgba</title>
        <style type="text/css"> .bg-box { width: 200px; height: 200px; border: 1px solid #ccc; background: red; position: relative; } .bg-content { width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0,0.5); } .bg-content p{ padding: 5px 10px; color: white; font-size: 16px; } </style>
    </head>
    <body>
    
        <div class="bg-box">
           <div class="bg-content">
              <p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>
            </div>
        </div>
    
    </body>
    </html>

![在这里插入图片描述][20181125135601493.png]  
定义的 一个兼容 的 `rgba` 类:

.rgba { 
      background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
      background: rgba(0, 0, 0,0.5);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
     }

![在这里插入图片描述][2018112513570994.png]  
[css背景颜色属性值转换][css]

[20181125135123151.png]: /images/20210626/0674330eb10e4862b130a66fc33602b0.png
[20181125135601493.png]: /images/20210626/4bc1ee1509ad437786c80f13e0e3d171.png
[2018112513570994.png]: /images/20210626/876e521a70a545c9a589b836430b3c00.png
[css]: https://www.css88.com/demo/hex_color/