css模糊遮罩效果

原图:

模糊后的图片:

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);//值越大越模糊(重要代码)
		}
}
相关推荐
zhaoyang03015 分钟前
css3笔记 (1) 自用
前端·javascript·css·vue.js·笔记·html·css3
珎珎啊10 分钟前
CSS3 常用功能详细使用指南
前端·css·css3
moxiaoran57533 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
CrissChan4 小时前
Pycharm 函数注释
java·前端·pycharm
小小小小宇5 小时前
Vue.nextTick()笔记
前端
小约翰仓鼠6 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in6 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴6 小时前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼6 小时前
一篇文章实现Android图片拼接并保存至相册
android·java·前端