css filter屬性濾鏡變灰

 

　　如果有需求想讓網頁變成下面黯然失色的樣子應該怎么做呢？

 

　　其實很簡單，只需要給html添加css的filter屬性即可輕松實現，各主流瀏覽器兼容寫法如下：

html {
  -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);
}