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/[email protected]',
};
}
}
</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>
效果圖：
虛化前效果：
虛化後效果：
虛化效果加強： 值越大，虛化效果越明顯
