聽(tīng)起來(lái)是不是不可思議？但是真的是一行代碼就可以實(shí)現(xiàn)的，我是在無(wú)意之間發(fā)現(xiàn)了這個(gè)神奇的代碼，在這里分享給大家，也感謝那些無(wú)私的大神分享。
html {
-webkit-filter: grayscale(.95); //filter CSS 屬性.
}
什么filter CSS 屬性呢？
是將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。簡(jiǎn)單的說(shuō)就是通過(guò) filter 樣式改變了圖片、顏色、模糊、對(duì)比度等等信息
注意: 濾鏡通常使用百分比 (如：75%), 當(dāng)然也可以使用小數(shù)來(lái)表示 (如：0.75)。
為了兼容所有可能出現(xiàn)的瀏覽器，我們可以這樣兼容寫(xiě)：
html {
-webkit-filter: grayscale(95%);
-moz-filter: grayscale(95%);
-ms-filter: grayscale(95%);
-o-filter: grayscale(95%);
filter: grayscale(95%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0.95);
}
瀏覽器支持
圖片.png
注意: 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標(biāo)準(zhǔn) "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。
除了grayscale，還有很多其他的屬性值，可以動(dòng)手試試。
比如這里如果我們可以使用 blur 設(shè)置高斯模糊，用法如下：
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
圖片使用高斯模糊效果如下：
圖片.png
各個(gè)用法介紹大家可以參考菜鳥(niǎo)教程的文檔說(shuō)明：https://www.runoob.com/cssref/css3-pr-filter.html
如果有什么不懂或者不清楚的地方歡迎私信哦，讓我們共同學(xué)習(xí)，共同進(jìn)步吧。
u=1719002872,3076810538&fm=26&gp=0.jpg
