原图:
模糊后的图片:
html:
html
<div class="bj">
<div class="mengban">
</div>
</div>
css:
css
.bj {
width: 750rpx;
height: 643rpx;
background-image:
url('https://onlinekc.a.hlidc.cn/uploads/20241023/9e552fc928cc9407336b1920024f14de.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
.mengban {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13px);//值越大越模糊(重要代码)
}
}