各大网站变灰css主页变灰代码

技术路线基本一样，差别在兼容性上，对性能敏感的项目也要注意一下。

/****csdn*****************************************************************/
html {
	-webkit-filter: grayscale(100%); /* webkit */
	-moz-filter: grayscale(100%); /*firefox*/
	-ms-filter: grayscale(100%); /*ie9*/
	-o-filter: grayscale(100%); /*opera*/
	filter: grayscale(100%);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
/****bilibili*****************************************************************/
html.gray{
	filter:grayscale(85%) saturate(80%);
	-webkit-filter:grayscale(85%) saturate(80%);
	-moz-filter:grayscale(85%) saturate(80%);
	-ms-filter:grayscale(85%) saturate(80%);
	-o-filter:grayscale(85%) saturate(80%);
	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=.85);
	-webkit-filter:grayscale(.85) saturate(.8);
}
/****iqiyi*****************************************************************/
.gray {
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
/****qq*****************************************************************/
html.garyBody {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-webkit-filter: grayscale(1);
}
body{
	filter:gray; /*ie9- */
	background : none!important;
}
/****tmall & 12306 & yy*****************************************************************/
html {
	filter: grayscale(100%);
}
/****taobao*****************************************************************/
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
/****jd*****************************************************************/
html.o2_gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
/****weibo*****************************************************************/
html.grayTheme {
	-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);
	filter: gray;
}
/****zhihu & 1688*****************************************************************/
.itcauecng {
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}
/****hao123*****************************************************************/
html.grew-filter {
    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);
}
/****baidu*****************************************************************/
body.big-event-gray #aging-tools-pc div[class^=item-wrap],
body.big-event-gray #bottom_layer,
body.big-event-gray #bottom_layer .tip-hover-panel,
body.big-event-gray #form,
body.big-event-gray #passport-login-pop,
body.big-event-gray #s-hotsearch-wrapper,
body.big-event-gray #s_content_1,
body.big-event-gray #s_content_100,
body.big-event-gray #s_menu_gurd,
body.big-event-gray #s_side_wrapper,
body.big-event-gray #u1,
body.big-event-gray .advert-shrink,
body.big-event-gray .bdlayer,
body.big-event-gray .popup-advert,
body.big-event-gray .s-ctner-menus .s-menu-item-underline,
body.big-event-gray .s-menu-container,
body.big-event-gray .s-news-rank-wrapper,
body.big-event-gray .s-skin-container.skin-gray-event,
body.big-event-gray .s-top-left-new.s-isindex-wrap,
body.big-event-gray .under-searchbox-tips,
body.big-event-gray div[class^=cards_pop]{
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	filter:gray
}