這篇文章主要介紹了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如何為背景圖設置遮罩并解決遮罩樣式繼承問題”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

網站標題：CSS3如何為背景圖設置遮罩并解決遮罩樣式繼承問題
新聞來源：http://vcdvsql.cn/article20/gdghco.html

成都網站建設公司_創新互聯，為您提供建站公司、移動網站建設、網站排名、定制網站、網站導航、網站維護

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯