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

news2024/11/25 13:17:09

前言

  • 特定节日，你会发现网页和app首页都会变成灰色，以此来表达我们的哀思之情。

  • 好奇宝宝想知道各个网站都是使用哪些小技巧来做出这种效果的（由彩变灰，由灰变彩），于是稍微学习了一下…

由灰变彩

在这里插入图片描述
稍微想想，应该是在CSS中设置了灰色的样式。所以，F12大法瞧瞧呗…
不出意外基本都是加了“gray”相关的CSS样式，大部分都直接加在标签中，少部分是加在

中,对于图片可能会替换灰色图片，如百度。
按下F12后，搜索源码中的关键字“gray”，即可找到。如图：
在这里插入图片描述 

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

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

  • 一个是谷歌的插件“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;}");
})();

由彩变灰

通过对上述网站的学习，发现都是修改了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 */
}

使用

<html class="filter grayscale">

样式2，网页图片 变灰

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);

样式3
来自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");')
}

测试代码

<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>

参考链接

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/52995.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

USDP集群服务器宕机后集群及组件重启

USDP集群服务器宕机后集群及组件重启

USDP集群的其中2服务器意外宕机&#xff0c;其中包括一台USDP管理服务节点主机和工作节点主机&#xff0c;服务器重新启动后&#xff0c;USDP智能大数据平台无法登录&#xff0c;启动UDSP服务&#xff08;/opt/usdp-srv/usdp/bin/start-udp-server.sh&#xff09;后可以登录&am…
阅读更多...
Go1.9.3跑GinDemo

Go1.9.3跑GinDemo

Gin 1. 简介 1.1. 介绍 Gin是一个golang的微框架&#xff0c;封装比较优雅&#xff0c;API友好&#xff0c;源码注释比较明确&#xff0c;具有快速灵活&#xff0c;容错方便等特点 对于golang而言&#xff0c;web框架的依赖要远比Python&#xff0c;Java之类的要小。自身的n…
阅读更多...
Linux部署WordPress(宝塔版)

Linux部署WordPress(宝塔版)

宝塔手册宝塔安装 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 宝塔配置 1.帮助命令&#xff1a;bt2.修改用户名(童心同萌)&#xff1a;bt 63.修改密码(123456)&#xff1a;bt 54.修改端口(888…
阅读更多...
JWT详细介绍

JWT详细介绍

文章目录1 jwt介绍1.1 什么是jwt1.2 使用场景1.2.1 授权1.2.2 信息交换1.3 JWT结构1.3.1 header1.3.2 payload1.3.3 signature 签名2 Python 实现2.1 手动编码2.2 jwt包3 校验 jwt5 js解析jwt1 jwt介绍 官网&#xff1a;https://jwt.io/ 本文以python来进行实战演示 1.1 什么…
阅读更多...
KG-开源项目：CMeKG【利用自然语言处理与文本挖掘技术，基于大规模医学文本数据，以人机结合的方式研发的中文医学知识图谱】

KG-开源项目：CMeKG【利用自然语言处理与文本挖掘技术，基于大规模医学文本数据，以人机结合的方式研发的中文医学知识图谱】

CMeKG&#xff08;Chinese Medical Knowledge Graph&#xff09;是利用自然语言处理与文本挖掘技术&#xff0c;基于大规模医学文本数据&#xff0c;以人机结合的方式研发的中文医学知识图谱。 项目来源&#xff1a; 中文医学知识图谱CMeKG2.0版发布-自然语言处理实验室北京大…
阅读更多...
iOS开发之打包上传到App Store——（一）各种证书的理解

iOS开发之打包上传到App Store——（一）各种证书的理解

OK&#xff0c;有日子没写iOS开发的相关文章啦&#xff0c;主要是最近的精力都没在这上面&#xff0c;不过既然产品已经快要出来了&#xff0c;就有必要了解一下各种证书啥的&#xff08;众所周知iOS的一堆证书可是很让人头大呀&#xff09;&#xff0c;最近确实被这个搞得头大…
阅读更多...
外汇天眼：随着美元贬值所有世界货币，每个国家都在为自己着想

外汇天眼：随着美元贬值所有世界货币，每个国家都在为自己着想

没有迹象表明各国政府愿意合作&#xff0c;各国被迫靠自己的力量建立防御措施&#xff0c;抵御万能的美元的无情力量。 在美联储的鹰派政策、美国经济强劲以及寻求市场波动避险的投资者的支持下&#xff0c;美元兑所有其他货币正在稳步走强&#xff0c;创下数十年来的最大涨幅。…
阅读更多...
信号发生器不会用？一篇文章教会你

信号发生器不会用？一篇文章教会你

信号发生器是一种能提供各种频率、波形和输出电平电信号的设备。在测量各种电信系统或电信设备的振幅特性、频率特性、传输特性及其它电参数时&#xff0c;以及测量元器件的特性与参数时&#xff0c;用作测试的信号源或激励源。 1、信号发生器如何使用 选用与验电器相同电压等…
阅读更多...
Gateway--服务网关

Gateway--服务网关

目录一、网关简介二、Gateway简介三、Gateway快速入门基础版增强版简写版四、Gateway核心架构基本概念执行流程五、断言内置路由断言工厂内置路由断言工厂的使用自定义路由断言工厂六、 过滤器局部过滤器内置局部过滤器内置局部过滤器的使用自定义局部过滤器全局过滤器内置全局…
阅读更多...
ROS MoveIT2（humble）安装总结

ROS MoveIT2（humble）安装总结

版本 系统版本&#xff1a;ubuntu22.04 ROS2版本&#xff1a;humble Moveit版本&#xff1a;moveit2-humble 安装 ROS 2 和 Colcon 如果您在接下来的几个步骤中遇到错误&#xff0c;一个好的开始是返回并确保您已正确安装 ROS 2。用户通常忘记的一个是获取 ROS 2 安装本身。…
阅读更多...
手写Redux(一)：实现Redux

手写Redux(一)：实现Redux

在React中&#xff0c;组件和组件之间通过props传递数据的规范&#xff0c;极大地增强了组件之间的耦合性&#xff0c;而context类似全局变量一样&#xff0c;里面的数据能被随意接触就能被随意修改&#xff0c;每个组件都能够改context里面的内容会导致程序的运行不可预料。 …
阅读更多...
复习计算机网络——第二章记录（2）

复习计算机网络——第二章记录（2）

理解一些基本概念&#xff1a; 1、数据&#xff08;data&#xff09;是运送信息的实体。 2、信号&#xff08;signal&#xff09;是数据的电气的或电磁的表现。 3、数据或信号可以是模拟的&#xff0c;也可以是数字的。 4、所谓“模拟的”就是连续变化的。 5、所谓“数字的…
阅读更多...
后端微服务项目中出现的问题整理2022年11月

后端微服务项目中出现的问题整理2022年11月

后端微服务项目中出现的问题整理2022年11月后端微服务项目中出现的问题整理2022年11月1.SpringBoot-Mail-Service&#xff08;Spring邮箱服务&#xff09;报错截图解决办法方法一&#xff1a;使用Resource注解方法二&#xff1a;添加(requiredfalse)Resource和Autowired区别2.反…
阅读更多...
基于plc的自动洗碗机的设计（西门子）

基于plc的自动洗碗机的设计（西门子）

目 录 摘 要 I Abstract II 1绪论 1 1.1全自动洗碗机的发展 1 1.2全自动洗碗机概述 2 1.2.1 全自动洗碗机的分类 2 1.2.2 全自动洗碗机的基本结构 3 1.2.3 全自动洗碗机的工作原理 4 1.3研究主要内容 4 2 全自动洗碗机机械设计 6 2.1 整体方案设计 6 2.2 各重要部件设计 6 2.2.…
阅读更多...
TF-IDF

TF-IDF

2.TF - IDF&#xff1a;作用&#xff1a;提取出来一句话中词的重要性&#xff0c;分成两个部分&#xff1a; tf: 词频(某一类中词条出现的次数 / 该类中所有词条数目) idf: 逆文档频率&#xff08;作用&#xff1a;去掉逗号&#xff0c;的等&#xff09;公式&#xff1a;idf l…
阅读更多...
【第一阶段：java基础】第8章：面向对象编程高级-2（P394-P423）final、抽象类、接口、内部类

【第一阶段：java基础】第8章：面向对象编程高级-2（P394-P423）final、抽象类、接口、内部类

本系列博客是韩顺平老师java基础课的课程笔记&#xff0c;吐血推荐的一套全网最细java教程&#xff0c;获益匪浅 韩顺平java课程 目录&#xff08;P394-P423&#xff09; 1 final 2 抽象类 3 接口 4 内部类 1️⃣ 局部内部类 2️⃣&#x1f353;匿名内部类 3️⃣成员内部类 4️…
阅读更多...
C++，顺序结构，选择结构，循环结构

C++，顺序结构，选择结构，循环结构

目录 1.选择结构 1.1if语句 1.1.1单行if语句 1.1.2多行格式的if语句 1.1.3多条件if语句 1.1.4嵌套if语句 1.2三目运算符 1.3switch语句 2.循环结构 2.1while循环 2.2do..while语句 2.3for循环语句 2.4嵌套循环 3.跳转语句 3.1.1break 3.1.2continue 3.1.3goto语句 …
阅读更多...
UDP-GlcNAc，UDPAG，尿苷二磷酸-N-乙酰基葡萄糖胺，UDP-N-乙酰葡糖胺

UDP-GlcNAc，UDPAG，尿苷二磷酸-N-乙酰基葡萄糖胺，UDP-N-乙酰葡糖胺

产品名称&#xff1a;UDP-GlcNAc 尿苷二磷酸-N-乙酰基葡萄糖胺&#xff0c;UDPAG&#xff0c;UDP-N-乙酰葡糖胺 别 名&#xff1a;5-二磷酸尿嘧啶核苷-N-乙酰半乳糖胺二钠盐;5′-二磷酸尿嘧啶核苷-N-乙酰半乳糖胺二钠盐 英文名&#xff1a;uridine 5-diphospho-N-acetyl-*g…
阅读更多...
在家做副业可以做什么，做自媒体应该选择什么平台

在家做副业可以做什么，做自媒体应该选择什么平台

今天分享五个&#xff0c;即使你在家里没有收入&#xff0c;自己就可以做的自媒体副业&#xff0c;给自己带来一些收益。 ​ 第一个自媒体副业是公众号&#xff0c;很多人多人都知道。很多人也喜欢看别人写的公众号。 其实微信官方账号注册很简单&#xff0c;不需要花钱有个邮…
阅读更多...
Huggingface Transformers各类库介绍（Tokenizer、Pipeline）

Huggingface Transformers各类库介绍（Tokenizer、Pipeline）

目录前言0、transformers的安装以及介绍0-1、 介绍0-2、安装一、分词——transformers.AutoTokenizer1-0、相关参数介绍&#xff08;常用参数介绍&#xff09;1-1、加载、保存1-2、使用以及原理二、黑盒子——transformers.pipeline2-0、pipeline怎么理解&#xff1f;2-1、目前…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023