CSS3模糊的使用
# CSS3模糊的使用
# 毛玻璃效果
.container-filter {
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 Baskerville, Palatina, serif;
position: relative;
z-index: 1; /*使用z-index确定层级关系，必须确保子元素是在最上层的*/
}
.container-filter,
.content-filter::before {
background: url("139.png") 0 / cover fixed;
}
.content-filter {
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 23em;
background: hsla(0, 0%, 100%, .25) border-box;
overflow: hidden;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
}
.content-filter::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: -30px; /*模糊在边缘会减弱，用margin:-30px扩大边距*/
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
text-decoration: none;
}
.text{
margin:40px;
}
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
41
42
43
44
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
41
42
43
44
<div class="container">
<div class="content">
<div class="text">
"The only way to get rid of a temptation is to yield to it.
Resist it, and your soul grows sick with longing for the things
it has forbidden to itself, with desire for what its monstrous
laws have made monstrous and unlawful."
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 背景模糊局部清晰
背景局部清晰效果需要使用background:inherit属性，来继承父元素背景。
简单来说，伪元素after通过inherit属性继承了container的背景，并设置全屏大小和模糊效果；content也继承了container的背景，但是没有设置模糊效果。这样就实现背景局部清晰的效果了。
注意！子元素不能使用transform来定位了，会影响最终效果。
.container {
min-height: 100vh;
box-sizing: border-box;
font: 110%/1.6 Baskerville, Palatina, serif;
position: relative;
z-index: 1;
background: url("139.png") 0 / cover fixed;
}
.container::after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.content{
position: absolute;
left:40%;
top:30%;
width:200px;
height:200px;
text-align: center;
background: inherit;
z-index:11;
box-shadow: 0 0 10px 6px rgba(0,0,0,.5);
}
.text{
margin:40px;
}
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
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
<div class="container">
<div class="content">
<div class="text">
something like this...
</div>
</div>
</div>
1
2
3
4
5
6
7
2
3
4
5
6
7
在GitHub上编辑 (opens new window)
上次更新: 1/20/2022, 11:27:12 AM