一行程式碼 網頁變灰
阿新 • • 發佈：2022-12-08
背景
想必大家都感受到了，很多網站、APP 在昨天都變灰了。
先來感受一下變灰後的效果。
讓網頁變為黑白配色，是個常見的訴求。而且往往是突如其來的訴求，是無法預知的。
當發生這樣的需求時，我們需要迅速完成變更釋出。
這種灰色的效果怎麼實現的呢？如何做到圖片、文字、按鈕都變灰的效果呢？
一行程式碼
這一行程式碼是個CSS程式碼：
filter: grayscale(1)
為了使整個網頁生效，你可以把它放在 標籤的樣式裡。直接寫到 html 檔案內，例如：
<style>
html {
filter: grayscale(1);
}
</style>
也可以用內聯樣式，只要沒用 important CSS 語法，內聯樣式優先順序最高：
<html style="filter:grayscale(1)">
...
</html>
為了更好的相容性，你可以補一個帶 -webkit- 字首的樣式，放在 filter 後面：
<html style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</html>
語法
grayscale(amount)
引數 :
轉換值的大小，可以是<number> 或 <percentage>.。當值為 100% 時，灰度最大。0% 時與原圖沒有區別。0% 到 100% 之間的值會使灰度線性變化。amount 為空時使用值為1。
.
例子 :
grayscale(0) /* 無效果 */
grayscale(.7) /* 70% 灰度 */
grayscale(100%) /* 灰度最大 */
相容性
如果你想獲得更好的相容性，可以加字首 ：
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);