聽起來是不是不可思議邑狸？但是真的是一行代碼就可以實現(xiàn)的，我是在無意之間發(fā)現(xiàn)了這個神奇的代碼涤妒，在這里分享給大家单雾，也感謝那些無私的大神分享。
html {
-webkit-filter: grayscale(.95); //filter CSS 屬性.
}
什么filter CSS 屬性呢她紫？
是將模糊或顏色偏移等圖形效果應用于元素硅堆。濾鏡通常用于調整圖像，背景和邊框的渲染贿讹。簡單的說就是通過 filter 樣式改變了圖片渐逃、顏色、模糊民褂、對比度等等信息
注意: 濾鏡通常使用百分比 (如：75%), 當然也可以使用小數(shù)來表示 (如：0.75)茄菊。
為了兼容所有可能出現(xiàn)的瀏覽器疯潭，我們可以這樣兼容寫：
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) 支持的非標準 "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性面殖。
除了grayscale袁勺，還有很多其他的屬性值，可以動手試試畜普。
比如這里如果我們可以使用 blur 設置高斯模糊期丰，用法如下：
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
圖片使用高斯模糊效果如下：
圖片.png
各個用法介紹大家可以參考菜鳥教程的文檔說明：https://www.runoob.com/cssref/css3-pr-filter.html
如果有什么不懂或者不清楚的地方歡迎私信哦，讓我們共同學習吃挑，共同進步吧钝荡。
u=1719002872,3076810538&fm=26&gp=0.jpg
