在今年(2020年)的4月4日，國家經歷了非常悲痛的時刻，北京時間 10 點鍾全國默哀，來致敬英雄。
網站變灰
當天網站的頁面和內容都變成了灰色，比如：百度、嗶哩嗶哩、愛奇藝 等等。
實現這種的頁面效果我們需要用到一個css的過濾屬性：filter(濾鏡)
可以將改樣式屬性設置在某個DOM節點上，實現整個網頁的灰色效果，可以將其設置為全局的效果，將屬性設置在 html 這個節點上。
-webkit-filter : grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
這里可以看下瀏覽器對 filter 屬性的兼容性：
這里可以看到除了
IE 不支持 ，其他的 PC、手機的瀏覽器都支持了。
css3中的 filter 屬性的默認值為 none (沒有效果)，無繼承
filter屬性的 Filter 函數功能：
- 模糊： blur(px) ：給圖像設置高斯模糊，“radius” 的值設定高斯函數的標准差，或者是屏幕上有多少像素相互融合，所以值越大，越模糊。默認值為 0，可以設置css長度值，不接受百分比值。
- 亮度：brightness(%) ：給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值為0%，圖像會變黑。值是100%，則圖像無變化，其他值是效果的線性乘數。值可以超過 100%，圖片會比原來的亮。默認值為 1 。
- 灰度：grayscale(%) ：將圖片轉換為灰度圖像，值定義轉換的比例。值為 100% 圖像完全轉換為灰度圖像，值為 0% 圖像無變化。默認值為 0deg。該值無最大值，超360deg時相當於又繞一圈。
- 反轉：invert(%) ：反轉圖像，值定義反轉的比例。值為 0% 無變化，值為 100% 時完全反轉。值在 0% 和 100% 之間，則是效果的線性乘法，默認值為 0 。
- 透明度：opacity(%)：轉化為圖像的透明程度，值定義轉換比例。0% 時完全透明，100%時無變化。值在 0% 和 100% 之間，則是效果的線性乘法，默認值是 1 。
- inital：設置該屬性為默認值。
- inherit：從父元素繼承該元素。
以上為一部分函數功能，可以點擊連接查看更詳細的相關功能。