css 背景图片虚化模糊效果
主要用到CSS3 filter(滤镜) 属性
html
<view class="box">
<view class="content">
</view>
</view>
css
.box{
background-image: url('https://***.com/online/***.png');
background-size: 100% 100%;
}
.box:after{
-webkit-filter: blur(3px) brightness(50%);
filter: blur(3px) brightness(50%);
transform: scale(1.3);
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
z-index: 2;
}
.content{
z-index: 999;
position: relative;
}
如果出现边缘白边，考虑使用
background-blend-mode: darken; //定义了背景层的混合模式（图片与颜色）
background-color: #3c3c3c; // 解决小白边
background-position:center;
