背景
想必大家都感受到了，很多網(wǎng)站炉爆、APP 在前幾天都變灰了堕虹。
先來感受一下變灰后的效果。
讓網(wǎng)頁(yè)變?yōu)楹诎着渖沂祝莻€(gè)常見的訴求赴捞。而且往往是突如其來的訴求，是無(wú)法預(yù)知的郁稍。
當(dāng)發(fā)生這樣的需求時(shí)赦政，我們需要迅速完成變更發(fā)布。
這種灰色的效果怎么實(shí)現(xiàn)的呢耀怜？如何做到圖片恢着、文字、按鈕都變灰的效果呢财破？
一行代碼
這一行代碼是個(gè)CSS代碼：
filter: grayscale(1)
為了使整個(gè)網(wǎng)頁(yè)生效掰派，你可以把它放在 <html> 標(biāo)簽的樣式里。直接寫到 html 文件內(nèi)左痢，例如：
<style>
html {
filter: grayscale(1);
}
</style>
也可以用內(nèi)聯(lián)樣式靡羡，只要沒用 important CSS 語(yǔ)法，內(nèi)聯(lián)樣式優(yōu)先級(jí)最高：
<html style="filter:grayscale(1)">
...
</html>
為了更好的兼容性俊性，你可以補(bǔ)一個(gè)帶 -webkit- 前綴的樣式略步，放在 filter 后面：
<html style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</html>
語(yǔ)法
grayscale(amount)
參數(shù) :
轉(zhuǎn)換值的大小，可以是<number>或 <percentage>.定页。當(dāng)值為 100% 時(shí)纳像，灰度最大。0% 時(shí)與原圖沒有區(qū)別拯勉。0% 到 100% 之間的值會(huì)使灰度線性變化竟趾。amount 為空時(shí)使用值為1。
.
例子 :
grayscale(0) /* 無(wú)效果 */
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);
