css 虚化背景图

虚化背景样式：

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

示例直接上代码，此示例是基于uniapp项目举例（最近在熟悉uniapp框架，所以直接基于项目写例子）

注：其中涉及到动态设置背景图知识点可参考另一篇：/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>

效果图：

虚化前效果：

虚化后效果：

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