CSS：filter（滤镜）修饰父元素背景，影响子元素问题解决

问题：
父元素作为背景，设置了filter的高斯模糊效果，影响到了子元素的文字↓↓↓↓↓↓↓↓↓↓

<div class="cell">
    <p>嗷嗷嗷嗷嗷嗷嗷嗷啊</p>
</div>
/******************************/
<style>
        .cell{
            width: 500px;
            height: 250px;
            background: url('../images/tudou.jpg');
            filter: blur(3px);
            -webkit-filter: blur(3px);
        }
        .cell p{
            font-size: 80px;
            color: red;
        }
    </style>

解决：
利用伪元素，将背景filter和设置在伪元素上而非父元素。

<div class="cell">
    <p>嗷嗷嗷嗷嗷嗷嗷嗷啊</p>
</div>
/******************************/
 <style>
        .cell{
            width: 500px;
            height: 250px;
            position: relative;
        }
        .cell::before{//将背景和高斯模糊全部设置在了伪元素内，并让伪元素的z-index为-1，避免遮盖其他元素
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
            background: url('../images/tudou.jpg');
            filter: blur(3px);
            -webkit-filter: blur(3px);
        }
        .cell p{
            font-size: 80px;
            color: red;
        }
    </style>