國家一些重要的公祭日，通常很多網站的色系都會整體變成灰色調，那是怎麼實現的？其實很簡單，在body上整體加一段樣式即可。

完整css程式碼如下

  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1)
 

filter介紹

css3 Filter（濾鏡）屬性提供了提供模糊和改變元素顏色的功能。CSS3 Fitler 常用於調整影象的渲染、背景或邊框顯示效果。
主要效果介紹：

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

1. blur(px) 模糊，預設0px，值越大越模糊
2. brightness(%) 更亮或更暗，如果值是0%(全黑),值是100%(無變化),>100%(更亮)
3. contrast(%) 對比度，值是0%(全黑),值是100%(無不變),>100%(更低的對比)
4. grayscale(%) 灰度，值為100%(轉為灰度影象)，值為0%(無變化)，值在0%到100%之間
5. opacity(%) 透明度，值為0%(完全透明)，值為100%(無變化),與opacity屬性類似
6. sepia(%) 褐色，取值0%-100%
7. invert(%) 反轉顏色，取值0%-100%
8. drop-shadow(h-shadow v-shadow blur spread color) 設定陰影，該函式與box-shadow屬性很相似，不同之處在於，通過濾鏡一些瀏覽器為了更好的效能會提供硬體加速