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);
        }