css模糊遮罩效果

原图：

模糊后的图片：

html:

<div class="bj">
	<div class="mengban">

	</div>
</div>

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);//值越大越模糊（重要代码）
		}
}