CSS3為背景圖設置遮罩并解決遮罩樣式繼承問題

發(fā)布時間：2020-06-22 11:09:43 作者：AdventureSpirit

我要評論

這篇文章主要介紹了CSS3為背景圖設置遮罩并解決遮罩樣式繼承問題,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

工作中很多時候需要對圖片背景作處理,比如設置通透性，模糊處理等等

但是如果對背景圖所在標簽直接設置這些效果的話，這些樣式會被子標簽繼承。

例1: 給背景所在標簽設置模糊效果，影響到了子標簽內(nèi)的文字

   <style>
        .parent{
            background: url('./test.jpg') no-repeat center;
            filter: blur(3px)
        }
        .son{
            filter: blur(0);
            /*
            在子標簽內(nèi)設置相同屬性也無法覆蓋繼承來的樣式
            */
        }
    </style>

    <div class="parent">
        <p class="son">Hello</p>
    </div>

解決方法：

為父標簽中添加一個標簽，令其絕對定位并鋪滿父標簽，將背景 / 樣式設置在該標簽內(nèi)。

   <style>
        .parent{
            position: relative;
            /*讓父標簽相對定位，使.middle相對自己定位*/
        }
        .middle{
            background: url('./test.jpg') no-repeat center;
            filter: blur(3px);

            position: absolute;
            height: 100%;
            width: 100%;
            
            z-index: -1;
            /*降低圖層高度，防止遮蓋其他子元素*/
        }
        .son{
        }
    </style>
    
    <div class="parent">
        <div class="middle"></div>
        <p class="son">Hello</p>
    </div>