局部背景模糊效果实现

一、为什么要做成局部背景模糊？

       我也是经过和UI沟通，主要是为了让顶层字体看的更清晰一些。话不多说，直接2种效果对比下，可以看出来经过背景模糊的字体会更加清晰，用户体验更好。

 

需要注意的几点：

  1、父元素需要是背景图片。 2、局部的background 值为 inherit，继承父元素背景。 3、通过filter： blur实现模糊效果

.productItem {
    width: 240px;
    height: 240px;
    overflow: hidden;
    background: url('https://img30.360buyimg.com/img/jfs/t1/167874/20/37435/79722/6462f097F233c4a56/2a783b8fb1d57e2e.png');
    background-size: 100% 100%;
    position: relative;
}

.productItem-noStock {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 16px;
    text-align: center;
    color: #FFF;
    line-height: 80px;
    margin: -40px 0 0 -40px;
    background:  rgba(26,26,26,0.5);
}

.productItem-noStock-vague {
    content:'';
    position: absolute;
    z-index: 9;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    background: inherit;
    filter:blur(4px); 
    overflow: hidden;
}

.productItem-stock-tip {
    width: 100%;
    background: rgba(26,26,26,0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #FFF;
    z-index: 2;
}

.productItem-tip-vague {
    width: 100%;
    background: inherit;
    position: absolute;
    height: 20px;
    left: 0;
    bottom: 0;
    filter: blur(4px);
    z-index: 1;
}

<div class="productItem">
       
        <div class="productItem-noStock">
            无 货
        </div>
        <div class="productItem-noStock-vague"></div>

        <div class="productItem-stock-tip">仅剩1件</div>
        <div class="productItem-tip-vague"></div>
    </div>