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

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

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

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

但是如果對背景圖所在標(biāo)簽直接設(shè)置這些效果的話，這些樣式會(huì)被子標(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)簽中添加一個(gè)標(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>