css 虚化背景图
虚化背景样式:
-webkit-filter: blur(2rpx);
-moz-filter: blur(2rpx);
-o-filter: blur(2rpx);
-ms-filter: blur(2rpx);
filter: blur(2rpx);
示例直接上代码,此示例是基于uniapp项目举例(最近在熟悉uniapp框架,所以直接基于项目写例子)
注: 其中涉及到动态设置背景图知识点可参考另一篇:https://blog.csdn.net/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>
效果图:
虚化前效果:
虚化后效果:
虚化效果加强: 值越大,虚化效果越明显