讓網(wǎng)站變灰的CSS代碼（支持IE、Firefox和Chrome）

當(dāng)需要將網(wǎng)站變灰色來表達(dá)平臺的哀悼時，如今主流CSS代碼為

主流方法！網(wǎng)站變灰色的CSS代碼

<style>
html{
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>

以上代碼除了IE都支持，
也是現(xiàn)在國內(nèi)主流網(wǎng)站常用的方法，
都對被嫌棄的IE沒做特別處理了
因為今年微軟已經(jīng)停止對IE支持更新，力推Edge瀏覽器，
Win平臺下的瀏覽器至此也與Chrome一致了。
上方代碼輕便易用，
放在需要灰掉的頁面即可。
建議放在<head>里。

支持IE9及以上

如果確定要兼容IE9及以上，
可以使用下方代碼，
效果如QQ騰訊網(wǎng)這樣，
可以用一個灰色層模擬一下。

<div style="position:fixed;
z-index:999;
width:100vw; 
height:100vh; 
left:-100vw; 
outline: 101vw solid rgba(100,100,100,.7);"></div>

讓網(wǎng)站變灰的CSS代碼（支持IE、Firefox和Chrome）

本文于2022年11月30日更新

RocPro永久尊享版優(yōu)設(shè)VIP鐵粉

文章 579 人氣 1039.5w

優(yōu)設(shè) 用戶體驗師
收藏 9
點贊 24

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

文章目錄