CSS3如何為背景圖設(shè)置遮罩并解決遮罩樣式繼承問題

這篇文章主要介紹了CSS3如何為背景圖設(shè)置遮罩并解決遮罩樣式繼承問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

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

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

解決方法：

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

   <style>
        .parent{
            position: relative;
            /*讓父標(biāo)簽相對定位，使.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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3如何為背景圖設(shè)置遮罩并解決遮罩樣式繼承問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!