杰人编程网

注：以下代码源自原网站css代码，主要使用css的filter属性

/*csdn网站变灰色的效果，代码如下*/
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);
}
 
/*百度logo图片变灰色的效果，代码如下*/
#result_logo.qm-activity {
    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;
}
 
/*腾讯网站变灰色效果，放在body中，代码如下，*/
.garyBody {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}
 
/*淘宝网首页变灰色，代码如下*/
html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
 
/*京东商城首页变灰色，代码如下*/
html.o2_gray {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
 
/*网易首页变灰色，代码如下*/
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
}

参考：

https://web.developers.google.cn/learn/css/filters?hl=zh-cn

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter