网页去色变黑白+网页黑白恢复为彩色
前言
特定节日,你会发现网页和app首页都会变成灰色,以此来表达我们的哀思之情。
好奇宝宝想知道各个网站都是使用哪些小技巧来做出这种效果的(由彩变灰,由灰变彩),于是稍微学习了一下…
由灰变彩
稍微想想,应该是在CSS中设置了灰色的样式。所以,F12大法瞧瞧呗…
不出意外基本都是加了“gray”相关的CSS样式,大部分都直接加在标签中,少部分是加在
按下F12后,搜索源码中的关键字“gray”,即可找到。如图:
![](/assets/blank.gif)
<html class="filter grayscale" lang="zh-CN">
<div data-v-3dfbd65e="" class="gray">
<html class="gray" lang="zh-CN">
src="//www.baidu.com/img/flexible/logo/pc/index_gray.png"
<body ssr="n" class="big-event-gray">
- 接下来就简单了,把对应的代码删除就可以恢复色彩。这个方法有一个不足之处就是,一旦页面刷新之后,就又变成灰色了。
那就借助一下插件脚本的力量:
- 一个是使用样式编辑【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;
}
使用
<html class="filter grayscale">
样式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
<svgxmlns=" http://www.w3.org/2000/svg">
<filterid="grayscale">
<feColorMatrixtype="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>
然后利用过滤器的属性,我们可以通过SVG文件中的元素的ID连接SVG文件
img {filter:url('img/gray.svg#grayscale');
}
也可以把它放到CSS文件中,例如:
img {filter:url('url("data:image/svg+xml;utf8,<svg%20xmlns=' http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");')
}
样式5
FLASH动画的颜色不能被CSS滤镜控制,但可以在FLASH代码的和之间插入如下
<param value="false" name="menu"/> <param value="opaque" name="wmode"/>
测试代码
<html class="filter grayscale"><head><title>网页黑白图</title><style>html{测试页面}</style></head><body><img src="https://www.baidu.com/img/bd_logo1.png"/><img src="https://www.baidu.com/img/bd_logo1.png"/></body>
</html>
参考链接
网页彩色图片全部变灰色(黑白)
让网页图片变灰色的三种方法
怎么让灰色的网页恢复成彩色,灰色网页变回彩色脚本代码
网站变灰色代码方法大集合(站点哀悼代码之用)
网站哀悼(全站变灰色)代码
网页去色变黑白+网页黑白恢复为彩色相关推荐
- html一键使网页字体变大,网页字体变大了怎么办
网页字体变大了导致重叠怎么办?不是缩放的原因 我的电脑网页字体变大了怎么办 按住CTRL在滚动鼠标滚轮...或者在网页右下角有个调整的,,百分之多少的..或者CTRL+ 或者CTRL- 都可以调整 原 ...
- html如何让网页的字变小,网页的字变小了怎么办 网页字体调整方法【图文】
互联网是我们生活中使用的比较多的电子网络圈,我们有时候上网,网页上的字体突然变的很小,看起来觉得很不舒服.网页的字体为什么会突然变小呢?这可能跟我们的设置有关系,有时候我们下载了浏览器或者软件,会导致 ...
- php的字体 怎么变大,网页字体怎么变大
网页字体变大的方法:1.打开浏览器,点击右上角的"三条横杆"按钮:2.在弹出的设置菜单中,点击"选项"按钮:3.在选项界面中,点击"界面设置" ...
- word图片填充之后图片颜色变灰了_一文读懂如何快速实现网页页面变灰?
灰色显示百度首页 今天早上醒来一看各大网站,为表示新冠肺炎疫情死难者的哀悼,各大网站均将页面变为灰色显示,显示的极为庄重肃穆.本文主要介绍常用网页页面快速变灰色的方法. CSS样式Filter属性 对 ...
- 前端页面添加灰色滤镜,使网页整体变灰
前端页面添加灰色滤镜,使网页整体变灰 修改css样式 只需要在html的样式里面加一句代码 html,body,div,img{-webkit-filter: grayscale(100%);-moz ...
- android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题
先森在完成网站自适应的过程中,遇到了很多大大小小的问题,其中一个问题就是横屏字体变大的问题.这个问题一碰到感觉很麻烦,其实解决方法却很简单. 网页自适应解决iPhone手机横屏字体变大问题 网上搜索结 ...
- 计算机上的字体太小怎么办,Win7电脑网页字体变小了怎么办?
在使用电脑浏览器浏览网页的时候,经常会发生一些问题,有用户反馈,他在使用电脑浏览网页的时候发现字体突然变小了,看起来很吃力,但是又不知道要怎么调整.下面小编就给大家介绍下Win7系统网页变小怎么办,一 ...
- 【python】彩色图秒变酷炫黑白图,灰度模式,比PS还好用的图像处理,cv2
使用python中的cv2模块,将彩色图秒变酷炫黑白图,比PS还好用! 完整代码: import cv2 #img = cv2.imread('./imgs/2.jpg',cv2.IMREAD_UNC ...
- 如何运用JS特效将网页设计变得更加生动有趣
在当今互联网时代,网页设计变得愈加重要.除了考虑到网页的基本框架和功能,特效也成为了设计师用来吸引读者眼球和提高用户体验的重要手段之一.今天我们将探讨如何使用JS特效将网页设计变得更加生动有趣. 动态 ...
最新文章
- 美国任命首位首席信息安全官
- 引用asp.net母版页后,母版页和内容页的页面事件执行顺序
- redis读取自增时候指定的key问题
- 计算机考试时间改革,武汉计算机二级考试时间和改革变化2021
- 为什么dos下的com文件都要org 0100h呢?为什么系统启动时要org 07c00h呢
- 字符串匹配算法(AC自动机 Aho-Corasick)
- C#/VB.NET 复制Excel中的指定单元格区域
- 深度学习(七十二)tensorflow 集群训练
- Java接口四个类四则运算_java 实现四则运算小程序
- 有哪些指标可以描述两个图(graph)的相似度?
- 大数据分析工具鄙视链:Python成老大,Excel小弟都称不上?
- python游戏房间_Python House冒险-如果已经进入一个房间,如何给出不同的输出
- 做图软件matlab,Matlab 生物节律作图软件
- vue组件制作专题 - (mpvue专用)在mpvue中纯自己写css实现简单左右轮播
- iOS启动动画效果实现
- 人人开源(后台代码、前端项目、代码自动生成)
- UWB定位/RSSI定位 三边测量法trilateration C语言代码详解
- 新人怎么发邮件,怎么给客户发一封得体的邮箱—TOM邮箱分享
- 查看已安装Tomcat的版本号
- 基于python的国内外研究现状怎么写_毕业论文中的国内外研究现状怎么写啊