网站变成灰色,兼容所有浏览器,图片灰色

场景描述:

一些大型网站在特殊日期将网站设置成灰色展示,以此来表达对于该日期的敬意!

对于网页灰色场景运用最为频繁的要属于,360百科,百度百科这一类的网站,会在特殊日期将某些网页设置成灰色展示。

那么运用代码如何来实现效果呢?

html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#grayscale);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}

将上方代码加入你需要设置的网页即可实现设置网页灰色展示,注:经测试能完全兼容各浏览器。

效果预览:


六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!