css背景图片模糊-蒲公英云

css背景图片模糊

移动端开发中经常会碰到图片模糊的需求，比如，下边是网易云音乐歌单详情的效果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70

模糊图片时背景图片，我们以小程序为例，实现上边效果：

wxml：

背景图片之所以要写在标签中，可以作为可复用页面，动态切换图片地址。

<view>
    <view class="bg-img-box">
        <view class="bg-img"
              style='background-image: url("http://p1.music.126.net/1gNcBmzdIaQtU00Dvp_TvQ==/109951163912081772.jpg")'
        >
        </view>
</view>

wxss：

之所以要放大1.5倍，因为模糊之后四周会有白边，很难看！伪元素为透明蒙层。

补充下：在使用filter: blur(xxxpx)时，可把图片变模糊，但是图片四周可会模糊，没有边界，很影响视觉效果，解决方法：

添加一个父级，父级来控制宽高，超出部分隐藏，这样，子级在放大1.5倍时，超出的部分会被隐藏，即可解决！

.bg-img-box{
    width: 100%;
    height: 400rpx;
    overflow: hidden;
}
.bg-img{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(20px);
    transform: scale(1.5);
    background-position: 50%;
}
.bg-img::after{
    content: " ";
    display: block;
    width: 100%;
    height: 400rpx;
    background: rgba(17,17,17,.2);
    z-index: 1;
}