css 虚化背景图

css 虚化背景图

虚化背景样式：

 -webkit-filter: blur(2rpx);
-moz-filter: blur(2rpx);
-o-filter: blur(2rpx);
-ms-filter: blur(2rpx);
filter: blur(2rpx);

示例直接上代码，此示例是基于uniapp项目举例（最近在熟悉uniapp框架，所以直接基于项目写例子）
注： 其中涉及到动态设置背景图知识点可参考另一篇：https://blog.youkuaiyun.com/AI_U20/article/details/89381052 （欢迎指导 (*^__^*) 嘻嘻……）

<template>
	<view class="shop_box">
		<view class="shop_bg_box" :style="{'backgroundImage': 'url(' + shopImg + ')'}">
			<view class="mask"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopImg: '../static/image/home/Home_shangxin_banner@2x.png',
			};
		}
	}
</script>

<style lang="scss">
.shop_box {
	.shop_bg_box {
		width: 100vw;
		height: 384rpx;
		background-size: 100% 100%;
		 -webkit-filter: blur(2rpx);
		-moz-filter: blur(2rpx);
		-o-filter: blur(2rpx);
		-ms-filter: blur(2rpx);
		filter: blur(2rpx);
		.mask {
			width: 100%;
			height: 100%;
			background: rgba(45,35,32,1);
			opacity: 0.55;
		}
	}
}
</style>

效果图：

虚化前效果：

虚化后效果：

虚化效果加强： 值越大，虚化效果越明显