css 背景图片虚化磨砂效果

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;