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

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

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

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

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

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

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

解決方法：

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

   <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>

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