背景
想必大家都感受到了，很多網(wǎng)站、APP 在前幾天都變灰了。
先來感受一下變灰后的效果。
讓網(wǎng)頁變?yōu)楹诎着渖莻€常見的訴求。而且往往是突如其來的訴求，是無法預知的。
當發(fā)生這樣的需求時，我們需要迅速完成變更發(fā)布。
這種灰色的效果怎么實現(xiàn)的呢？如何做到圖片、文字、按鈕都變灰的效果呢？
一行代碼
這一行代碼是個CSS代碼：
filter: grayscale(1)
為了使整個網(wǎng)頁生效，你可以把它放在 <html> 標簽的樣式里。直接寫到 html 文件內(nèi)，例如：
<style>
html {
filter: grayscale(1);
}
</style>
也可以用內(nèi)聯(lián)樣式，只要沒用 important CSS 語法，內(nèi)聯(lián)樣式優(yōu)先級最高：
<html style="filter:grayscale(1)">
...
</html>
為了更好的兼容性，你可以補一個帶 -webkit- 前綴的樣式，放在 filter 后面：
<html style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</html>
語法
grayscale(amount)
參數(shù) :
轉(zhuǎn)換值的大小，可以是<number>或 <percentage>.。當值為 100% 時，灰度最大。0% 時與原圖沒有區(qū)別。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);
