zoukankan      html  css  js  c++  java
  • 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{

         100%;

        height: 100%;

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

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

        top: 0;

        left: 0;

          z-index: 10;

      }

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

  • 相关阅读:
    calcite 概念和架构
    在vscode中快速生成vue模板
    curl发送post请求
    【vue】chrome已安装Vue Devtools在控制台却无显示
    java(第一天)
    小游戏之莫交叉
    再谈成麻结账程序2.0
    成麻结账程序
    倍福Twincat2 常用快捷键及部分注意事项
    IP地址,子网掩码、默认网关,DNS服务器之间的联系与区别
  • 原文地址:https://www.cnblogs.com/nelly0213/p/6645898.html
Copyright © 2011-2022 走看看