css 透明度引发的思考

原创
2019/03/13 14:08
阅读数 94

模态框实现

想要实现个模态框的效果,背景有一层蒙版,第一个想法就是设置背景淡灰色并给个透明度,so easy!

background-color: rgba(0,0,0);
opacity: 0.55;

下面图片可以看到,模态框内部的文字也继承了 opacity 的透明度属性,即便给内部子元素设置个 opacity=1 也没有什么卵用。

opacity 实现的透明度会强行传给子元素

除了 opacity 之外,还有一种设置透明度的方法是 background-color: rgba(0,0,0,0.55) ,注意是 rgba 不是 rgb,前者最后那个字母 a 也是设置透明度的,这种方法就不会将透明属性传给子元素了,效果如下。

rbga() 实现的透明度不会继承给子元素

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模态框-练习</title>
    <style>
        body {
            color: #333;
        }
        .modal {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: rgba(0,0,0, 0.55);
        }
        .modal-dialog {
            position: relative;
            margin: 100px auto;
            max-width: 500px;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 6px;
            box-shadow: 0 3px 9px rgba(0,0,0,.5);
            background: #fff;
        }
    </style>
</head>
<body>
    <h1>hello world!</h1>
    <div class="modal">
        <div class="modal-dialog">
            <h1>模态框内部</h1>
        </div>
    </div>
</body>
</html>

到这里为止效果是弄出来了,又想着去参考 Bootstrap 和 Antd 的代码,看看它们的模态框怎么整的?发现这两货都是整了个空 div(.madal-mask) 来设置背景蒙版,另一个兄弟元素 div(/modal-dialog)  作为模态框的内容。为什么这样写?猜测是为了避免透明度继承的问题,但是一看 modal-mask 代码透明度是用 rgba 属性设置的,压根不存在透明度继承的问题,那么这种写法的意义又何在??

<div>
  <div class="modal-mask"/>  <!-- 设置背景蒙版,透明度 -->
  <div class="modal-dialog"> <!-- 模态框内容 -->
    
  </div>
</div>
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部