网页去色变黑白+网页黑白恢复为彩色

src="//www.baidu.com/img/flexible/logo/pc/index_gray.png"

接下来就简单了，把对应的代码删除就可以恢复色彩。这个方法有一个不足之处就是，一旦页面刷新之后，就又变成灰色了。

那就借助一下插件脚本的力量：

一个是使用样式编辑【Stylus】 安装一个插件：谷歌商店 csdn下载地址：Stylus1.5.9

html {

filter: grayscale(0) !important;

}

html,

body {

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: grayscale(0%);

}

* {

filter: none !important

}

一个是谷歌的插件“Permanent Inspect Element”，作用是保持修改页面的状态，也就是你对源码做的修改会保存，刷新之后也会保存。另一个就是使用油猴插件“黑白网页恢复彩色”或者“我要彩色”，两个都可以达到效果。 第一个脚本源码：

// ==UserScript==

// @name 黑白网页恢复彩色

// @namespace http://tampermonkey.net/

// @version 1.4.5

// @license MIT

// @description 黑白网页恢复彩色，匹配所有网页，即装即用。

// @author https://greasyfork.org/users/574395-frammolz-amanda

// @match *://*/*

// @grant none

// ==/UserScript==

(function() {

var filter = document.createElement('style');

filter.type = 'text/css';

document.getElementsByTagName('head')[0].appendChild(filter);

filter.appendChild(document.createTextNode("*{-webkit-filter:none!important;}"));

var windowUrl = window.location.href;

var baidudesk = /https:\/\/www.baidu.com/;

var baidumobile = /https:\/\/m.baidu.com/;

var kafan = /https:\/\/bbs.kafan.cn/;

var qpic = /https:\/\/www.58pic.com/;

if( windowUrl.match(baidudesk)){

document.getElementById("s_lg_img").setAttribute("src","https://www.baidu.com/img/flexible/logo/pc/index.png");

document.getElementById("s_lg_img_new").setAttribute("src","https://www.baidu.com/img/flexible/logo/pc/index.png");

document.getElementById("su").style.setProperty("background-color","#4e6ef2","important");

if (document.getElementsByClassName("index-logo-src").length==1){

document.getElementsByClassName("index-logo-src")[0].setAttribute("src","https://www.baidu.com/img/flexible/logo/pc/result.png");

document.getElementsByClassName("index-logo-peak")[0].setAttribute("src","https://www.baidu.com/img/flexible/logo/pc/result.png");

document.getElementsByClassName("index-logo-srcnew")[0].setAttribute("src","https://www.baidu.com/img/flexible/logo/pc/result.png");

}

}

if( windowUrl.match(baidumobile)){

document.getElementById("logo").getElementsByTagName("a")[0].getElementsByTagName("img")[0].setAttribute("src","https://www.baidu.com/img/flexible/logo/logo_web.png");

document.getElementById("index-bn").style.setProperty("background-color","#4e6ef2","important");

}

if( windowUrl.match(kafan)){

document.getElementById("nv_forum").style.setProperty("background-blend-mode","normal");

}

if( windowUrl.match(qpic)){

document.documentElement.style.setProperty("-webkit-filter","none","important");

}

})();

第二个脚本源码:

// ==UserScript==

// @name 我要彩色

// @version 0.1

// @description Color back

// @author voltachan(https://github.com/voltachan)

// @match http*://*/*

// @grant GM_addStyle

// @run-at document-start

// @namespace https://greasyfork.org/users/438767

// ==/UserScript==

(function() {

GM_addStyle("* {filter: none !important}");

//GM_addStyle("* {-webkit-filter:grayscale(0)! important;-moz-filter:grayscale(0) !important;-ms-filter:grayscale(0) !important;-o-filter:grayscale(0) !important;filter:grayscale(0) !important;filter:none !important;}");

})();

第三个脚本源码：

(function() {

GM_addStyle("* {filter: none !important}");

})();

由彩变灰

通过对上述网站的学习，发现都是修改了css样式，只要加上样式或者修改灰色图片就可以达到全站变灰的效果。所以上样式：

样式1

css文件

.grayscale {

--tw-grayscale: grayscale(100%);

-webkit-filter: grayscale(100%); /* webkit */

-moz-filter: grayscale(100%); /*firefox*/

-ms-filter: grayscale(100%); /*ie9*/

-o-filter: grayscale(100%); /*opera*/

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

filter:grayscale(100%);/* W3C */

filter:gray /* IE6-9 */

color:gray;

}

使用

样式2，js文件

grayscale(document.body); //整站变成灰色

grayscale(document.getElementById("main"));//指定元素变灰色

grayscale.reset(document.getElementById("main"));//指定元素还原

样式3，网页图片 变灰

js文件（代码来自Ajax Blender）

varimgObj = document.getElementById('js-image');

functiongray(imgObj) {

varcanvas = document.createElement('canvas');

varcanvasContext = canvas.getContext('2d');

varimgW = imgObj.width;

varimgH = imgObj.height;

canvas.width = imgW;

canvas.height = imgH;

canvasContext.drawImage(imgObj, 0, 0);

varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

for(vary = 0; y < imgPixels.height; y++){

for(varx = 0; x < imgPixels.width; x++){

vari = (y * 4) * imgPixels.width + x * 4;

varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

imgPixels.data[i] = avg;

imgPixels.data[i + 1] = avg;

imgPixels.data[i + 2] = avg;

}

}

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

returncanvas.toDataURL();

}

imgObj.src = gray(imgObj);

样式4 来自SVG Filter.

创建一个SVG文件,并将以下代码写在里面，保存命名为***.svg

然后利用过滤器的属性，我们可以通过SVG文件中的元素的ID连接SVG文件

img {

filter:url('img/gray.svg#grayscale');

}

也可以把它放到CSS文件中，例如：

img {

filter:url('url("data:image/svg+xml;utf8,#grayscale");')

}

样式5

FLASH动画的颜色不能被CSS滤镜控制，但可以在FLASH代码的和之间插入如下

测试代码

参考链接

网页彩色图片全部变灰色(黑白) 让网页图片变灰色的三种方法

怎么让灰色的网页恢复成彩色,灰色网页变回彩色脚本代码

网站变灰色代码方法大集合（站点哀悼代码之用）

网站哀悼（全站变灰色）代码