第一步
为父元素设置背景图background-image:url(‘xxx.png’)
第二步
为子元素设置backdrop-filter: blur(10px)
代码如下:
1、less部分
.father {
height: 330px;
background-image: url('./xxx.jpg');
position: relative;
&:before {
content: '';
display: block;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.15);
position: absolute;
z-index: 1;
}
.son {
height: 100%;
font-size: 40px;
color: #fff;
backdrop-filter: blur(10px);
position: relative;
z-index: 2;
}
}
2、html
<div className="father">
<div className="son">我我我</div>
</div>
效果图: