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

時間 2020-04-05

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

原文原文鏈接

爲表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世通報的深切哀悼，國務院今天發佈公告，決定2020年4月4日（明天）舉行全國性哀悼活動。在此期間，全國和駐外使館下半旗致哀，全國中止公共娛樂活動，4月4日10點開始，全國人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報鳴響。css

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

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

.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站爲例：web

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

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

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

我去Google查閱了相關資料，發現:微信小程序

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

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

如何解決呢？

解決方案1

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

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的元素單獨加上

<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>
複製代碼