css3隻需一招，将網站變成灰色的

今天大家在浏覽B站，騰訊視訊，等網站時，有沒有發現一個現象，網站變成灰色的了。

是不是跟平常不一樣了呢，這是因為今天（2020.4.4）是全國哀悼日，

是以網站這些就變成灰色的呢。

我去看了一下騰訊的做法，騰訊是将所有的圖檔換成了灰色的。

我覺得的缺點是：如果網站非要展示大量圖檔，不可能每一張圖，

都替換成灰色的圖檔吧！這樣可能要把美工累成啥XX

那麼B站是如何做的呢？

B站是通過，css3的屬性去控制的，

首先找到 html. 在 B 站的 html 中有一個 gray 這一個類。

然後全局搜尋。gray.

然後你會發現有這麼一段代碼。

如果将這一段代碼去除，網站将會恢複回來的彩色。

那麼能不能用css屬性将背景色圖檔這些變成灰色的呢。

答案是可以的哈。

使用filter 對布局的影響。

在正常的情況下 B 站這個導航欄滑到下面之後是 fixed 在頁面的頂部的

但假如你把這段 css 加到了 body 上會發生下面這種情況：(添加到 body 會出現 添加到 html 上就不會出現)

你可以發現它不再固定在頁面的頂部了，而是超出去了螢幕外面，

螢幕左下角的小電視人也跑到了頁面上半部分去，為什麼會發生這樣的情況呢？

對于指定了 filter 樣式且值不為 none 時，被應用該樣式的元素其子元素中如果有 position 為 absolute 或 fixed 的元素，

會為這些元素建立一個新的容器，使得這些絕對或固定定位的元素其定位的基準相對于這個新建立的容器。

我們可以聯想出 fixed 是相對于 html 根容器來定位的，如果在 body 上設定了 filter 則會建立一個新的定位基準，

而頁面滾動時将 body 滾動出了螢幕外，則 body 内所有子孫元素的 fixed 将産生不符合預期的效果。

（上面這一點對布局的影響是 參考：https://juejin.im/post/5e86e221e51d4546ce27b99c）

<ul class="demo">
        <li>11</li>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
    <img src="../dm.jpg" class="img-size">
<style>
 .demo {
            display: flex;
            width: 300px;
            height: 40px;
            line-height: 40px;
            list-style: none;
            text-align: center;
        }
        .demo li {
            width: 50px;
            color: antiquewhite;
            background: pink;
            padding-left: 0;
        }

        .img-size {
            width: 100px;
            height: 100px;
            background-size: 100%;
        }
</style>
           

如何變成灰色的呢？

有這幾種方式，都是利用css3de filter這個濾鏡屬性。

（1）
 html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

（2）
html {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter:
                grayscale(100%);
            -o-filter: grayscale(100%);
            filter: url("data:image/svg+xml;utf8,#grayscale");
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(1);
        }
           

我們公司正在尋找前端和後端，感興趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，請帶我們飛

如果你是菜鳥，我們帶你飛

僅限成都

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。