全國哀悼日，一段css讓全站變灰

時間 2020-06-14

標籤全國哀悼一段 css 變灰欄目 CSS 简体版

原文原文鏈接

想到以往默哀日訪問網站時發現整站會變成全灰，即想到若是當即開始開發、設計圖修改等工做也會消耗大量的時間與精力，那會不會有css能夠直接處理全部的元素將他們變灰，隨即想到了css3的filter（濾鏡），並也證明了這一想法的可行性。css

filter: grayscale 使用能夠調整元素的灰度值html

.gray-filter {
    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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

實戰

以B站爲例：css3

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

但假如你把這段css加到了body上會發生下面這種狀況：canvas

你能夠發現它再也不固定在頁面的頂部了，而是超出去了屏幕外面，屏幕左下角的小電視人也跑到了頁面上半部分去，爲何會發生這樣的狀況呢？瀏覽器

我去Google查閱了相關資料，發現:svg

對於指定了 filter 樣式且值不爲 none 時，被應用該樣式的元素其子元素中若是有 position 爲 absolute 或 fixed 的元素，會爲這些元素建立一個新的容器，使得這些絕對或固定定位的元素其定位的基準相對於這個新建立的容器。網站

咱們能夠聯想出fixed是相對於html根容器來定位的，若是在body上設置了filter則會建立一個新的定位基準，而頁面滾動時將body滾動出了屏幕外，則body內全部子孫元素的fixed將產生不符合預期的效果。

如何解決呢？

解決方案1

影響全站的方法咱們能夠將該樣式應用到根元素html上，即便建立了新的定位基準元素，也不會對子孫元素產生不符合預期的影響。url

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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

解決方案2

非全站變灰咱們能夠將須要使用filter的元素單獨加上spa

<html>
    <body>
        <div class="gray-filter"></div>
    </body>
</html>

<style>
.fixed {
    position: fixed;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 100px;
    background-color: #f00;
}
.gray-filter {
    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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
</style>