css 透明度引发的思考
作者: dkvirus 发表于: 2019-03-13 14:09:24 最近更新: 2019-03-13 14:09:47

模态框实现

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

1
2
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() 实现的透明度不会继承给子元素

源码如下:

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
30
31
32
33
34
35
36
37
38
39
40
<!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 属性设置的,压根不存在透明度继承的问题,那么这种写法的意义又何在??

1
2
3
4
5
6
<div>
<div class="modal-mask"/> <!-- 设置背景蒙版,透明度 -->
<div class="modal-dialog"> <!-- 模态框内容 -->

</div>
</div>
首页
友链
归档
dkvirus
动态
RSS