当前位置： 首页 > news >正文

网站都变成灰色了，怎么实现的？

news 2026/5/17 14:49:34

有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日的时候，都会让网站的全部网页变成灰色（黑白色），以表示我们对逝者或者英雄的缅怀和悼念。

当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？

有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实，解决方案很简单，只需要几行代码就能搞定了。通过参考资料，我总结出以下几个方法可以帮助我们达到目的：

使这个网页的颜色变成灰色的最简单的方法，就是在当前页面的css里面。添加下面的代码，并且让他在任意的浏览器里面正确的执行：

方法一:

<style type="text/css">
html {filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1)
}
</style>

filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的，意思和FILTER: gray;差不多，只是写法不同罢了。

方法二：

下面这段代码可以把网页变为黑白，将代码加到 CSS 最顶端就可以实现素装，如果网站没有使用 CSS，可以在网页/模板的 HTML 代码和 之间插入：

<style>html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
</style>

有一些网站可能使用这个 css 不能生效，是因为网站没有使用最新的网页标准协议，请将网页最头部的替换为以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

还有一些网站 FLASH 动画的颜色不能被 CSS 滤镜控制，可以在 FLASH 代码的和之间插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最后

给出一段规范的代码，把这段代码加入到网站页面的css里面即可实现页面变成灰色的效果：

html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);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=1)
}

相关文章：

网站都变成灰色了，怎么实现的？

有些时候我们需要把网站页面变成黑白色或灰色&#xff0c;特别是对于一些需要悼念的日子&#xff0c;以及一些影响力很大的伟人逝世或纪念日的时候&#xff0c;都会让网站的全部网页变成灰色&#xff08;黑白色&#xff09;&#xff0c;以表示我们对逝者或者英雄的缅怀和悼念。…...

编程日记 2023/4/20 21:00:33

NeRF详解

论文标题&#xff1a;《NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis》 论文地址&#xff1a;https://arxiv.org/abs/2003.08934 推荐代码&#xff1a;https://github.com/yenchenlin/nerf-pytorch 文章目录前言隐式表达NeRF的训练位置编码体渲染&…...

编程日记 2023/5/17 3:38:54

Java之静态代码块和静态类、静态导入

前言 在上一篇文章中给大家讲解了static静态关键字&#xff0c;以及静态变量、静态常量和静态方法等内容。但是关于static&#xff0c;还有其他的一些内容&#xff0c;比如静态类、静态代码块和静态导入等&#xff0c;接下来给大家继续分析讲解。我们一起来看看这些内容都是怎…...

编程日记 2023/4/20 23:44:39

Python3 File isatty() 、os.chflags()方法

Python3 File isatty() 方法Python3 File(文件) 方法概述isatty() 方法检测文件是否连接到一个终端设备&#xff0c;如果是返回 True&#xff0c;否则返回 False。语法isatty() 方法语法如下&#xff1a;fileObject.isatty(); 参数无返回值如果连接到一个终端设备返回 True&…...

编程日记 2023/5/17 23:38:45

【SH_CO_TMT_PACKAGE保留60天数据和增加索引】

1. 保留60天数据 DELETE FROM SH_CO_TMT_PACKAGE WHERE CREATED_ < SYSDATE - 195SH_CO_TMT_PACKAGE 这个表是tmt的数据统计表，数据量极大，大概有1500W 里头的数据都是从TMT机台运行状况表（比如满管率，断丝数，下次落纱时间）同步过来的。 朗通针对这些数据，做了个…...

编程日记 2023/4/22 1:36:58

2022蓝桥杯省赛——数位排序

问题描述 小蓝对一个数的数位之和很感兴趣, 今天他要按照数位之和给数排序。当两个数各个数位之和不同时, 将数位和较小的排在前面, 当数位之和相等时, 将数值小的排在前面。 例如, 2022 排在 409 前面, 因为 2022 的数位之和是 6, 小于 409 的数位之和 13 。 又如, 6 排在 …...

编程日记 2023/4/21 3:20:28

弥散磁共振成像在神经科学中的应用

导读弥散加权成像技术突破了神经科学的界限&#xff0c;使我们能够检查活体人脑的白质微观结构。这为基本的神经科学问题提供了答案&#xff0c;开启了一个以前基本上难以接近的新研究领域。本研究简要总结了神经科学历史上提出的关于大脑白质的关键问题。然后&#xff0c;阐述…...

编程日记 2023/4/20 19:10:03

多进程（python）

参考&#xff1a; https://www.liaoxuefeng.com/wiki/1016959663602400/1017627212385376 个人封装的python多进程处理类&#xff0c;跑满CPU&#xff0c;优化性能 概念 进程: 对于操作系统来说&#xff0c;一个任务就是一个进程&#xff08;Process&#xff09;&#xff0c;…...

编程日记 2023/5/17 3:40:17

利用Kali工具进行信息收集（35）

预备知识 Kali是一款开源的安全漏洞检测工具&#xff0c;是专业用于渗透测试的Linux操作系统&#xff0c;由BackTrack发展而来&#xff0c;可以帮助安全和IT专业人士识别安全性问题&#xff0c;验证漏洞的缓解措施&#xff0c;并管理专家驱动的安全性进行评估&#xff0c;提供真…...

编程日记 2023/4/20 9:01:54

《程序员面试金典（第6版）》 面试题 08.11. 硬币（动态规划，组合问题，C++）

题目描述 硬币。给定数量不限的硬币&#xff0c;币值为25分、10分、5分和1分&#xff0c;编写代码计算n分有几种表示法。(结果可能会很大&#xff0c;你需要将结果模上1000000007) 示例1: 输入: n 5 输出&#xff1a;2 解释: 有两种方式可以凑成总金额: 55 511111 示例2: 输…...

编程日记 2023/4/21 6:50:44

实体商家做抖音运营如何做矩阵？

商家实体门店如何做好短视频矩阵&#xff1f;这是一个值得深入探讨的问题。在当今的数字化时代&#xff0c;短视频成为越来越多企业吸引用户、提高曝光度的一种重要方式&#xff0c;实体店也不例外。在本文中&#xff0c;我们将提供一些实用的建议&#xff0c;帮助实体店如何做…...

编程日记 2023/4/23 11:51:19

java 双列集合Map 万字详解

目录 一、前言 二、概述 三、特点 四、常用方法 1. V put(K key, V value) : Δ代码演示 : 2. V get(Object key) : Δ代码演示 : 3. V remove(Object key) : Δ代码演示 : 4. int size() : Δ代码演示 : 5. default V replace(K key, V value) : Δ代码演示 : 6. bo…...

编程日记 2023/5/17 11:51:33

【数据结构】二叉树＜遍历＞

【二叉树遍历】|-前序-中序-后序-层序-|<二叉树的遍历>1.前序遍历【递归】2.中序遍历【递归】3.后序遍历【递归】4.层序遍历【非递归】4.1判断是否是完全二叉树<二叉树的遍历> 在学习二叉树遍历之前我们先了解下二叉树的概念。 二叉树是&#xff1a; 1.空树 2.非空…...

编程日记 2023/4/22 14:47:40

linux查看硬件信息

dmidecode用于在linux下获取硬件信息&#xff0c;遵循SMBIOS/DMI标准&#xff0c;可获取包括BIOS、系统、主板、处理器、内存、缓存等等硬件信息 1、查看CPU信息cat /proc/cpuinfo、lscpu 型号&#xff1a;cat /proc/cpuinfo|grep name|cut -f2 -d:|uniq -c 物理核&#xff1a…...

编程日记 2023/4/23 11:51:07

吐血整理，互联网大厂最常见的 1120 道 Java 面试题（带答案）整理

前言 作为一个 Java 程序员&#xff0c;你平时总是陷在业务开发里&#xff0c;每天噼里啪啦忙敲着代码&#xff0c;上到系统开发&#xff0c;下到 Bug 修改&#xff0c;你感觉自己无所不能。然而偶尔的一次聚会&#xff0c;你听说和自己一起出道的同学早已经年薪 50 万&#x…...

编程日记 2023/4/23 13:46:11

RabbitMQ如何避免消息丢失

目录1.生产者没有成功把消息发送到MQ2.RabbitMQ接收到消息之后丢失了消息3.消费者弄丢了消息前言 首先明确一点一条消息的传送流程&#xff1a;生产者->MQ->消费者 我们根据这三个依次讨论 1.生产者没有成功把消息发送到MQ 丢失的原因&#xff1a;因为网络传输的不稳定…...

编程日记 2023/5/17 23:40:41

做算法题的正确姿势（不断更新）

不停的反思自己&#xff0c;总结建议 做一道算法题&#xff0c;不能去死磕。 如果看一道题&#xff0c;半小时内&#xff0c;没有清晰的思路&#xff0c;就看题解&#xff01;&#xff01;&#xff01;你可能觉得你有点思路&#xff0c;就往里死钻&#xff0c;结果可能就像进…...

编程日记 2023/4/22 6:01:33

p85 CTF夺旗-JAVA考点反编译XXE反序列化

数据来源 图片来源 Java 常考点及出题思路 考点技术&#xff1a;xxe&#xff0c;spel 表达式&#xff0c;反序列化&#xff0c;文件安全&#xff0c;最新框架插件漏洞等 设法间接给出源码或相关配置提示文件&#xff0c;间接性源码或直接源码体现等形式 https://www.cnblog…...

编程日记 2023/4/20 8:08:43

FastJson——JSO字符串与对象的相互转化

一、FastJson介绍 ​ Fastjson是阿里巴巴的开源SON解析库它可以解析JSON格式的字符串&#xff0c;支持将java Bean序列化为ISON字符串&#xff0c;也可以从JSON字符串反序列化到JavaBean。 Fastjson的优点 速度快 fastjson相对其他JSON库的特点是快&#xff0c;从2011年fastj…...

编程日记 2023/4/21 0:37:10

《程序员面试金典（第6版）》面试题 08.08. 有重复字符串的排列组合（回溯算法，全排列问题）C++

题目描述 有重复字符串的排列组合。编写一种方法&#xff0c;计算某字符串的所有排列组合。 示例1: 输入&#xff1a;S “qqe” 输出&#xff1a;[“eqq”,“qeq”,“qqe”] 示例2: 输入&#xff1a;S “ab” 输出&#xff1a;[“ab”, “ba”] 提示: 字符都是英文字母。…...

编程日记 2023/4/23 15:39:44

用PyTorch和ECANet18搞定RAF-DB表情分类：从数据集下载到模型部署的保姆级教程

基于ECANet18的RAF-DB表情识别实战&#xff1a;从零构建高精度分类模型 人脸表情识别&#xff08;FER&#xff09;作为计算机视觉领域的重要分支&#xff0c;在情感计算、智能交互等领域展现出巨大潜力。本文将带您完整实现一个基于PyTorch和ECANet18的端到端表情识别系统&…...

编程新知 2026/5/17 9:42:48

开源自动驾驶系统终极指南：从入门到精通

开源自动驾驶系统终极指南&#xff1a;从入门到精通 【免费下载链接】openpilot openpilot is an operating system for robotics. Currently, it upgrades the driver assistance system on 300 supported cars. 项目地址: https://gitcode.com/GitHub_Trending/op/openpilo…...

编程新知 2026/5/17 9:10:32

3个按键冲突场景，Hitboxer如何帮你重获游戏控制权？

3个按键冲突场景&#xff0c;Hitboxer如何帮你重获游戏控制权&#xff1f; 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd 你是否曾在激烈的游戏对战中&#xff0c;因为同时按下W和S键而突然卡住&#xff1f;或…...

编程新知 2026/5/17 9:08:26

Godot游戏集成Discord状态：RPC插件原理与实战指南

1. 项目概述&#xff1a;在Godot引擎中点亮你的Discord状态 如果你是一名独立游戏开发者&#xff0c;或者正在用Godot引擎捣鼓一些有趣的个人项目&#xff0c;你可能会想让你的朋友或社区成员知道你现在正在“玩”什么。不是通过截图发到社交媒体&#xff0c;而是更实时、更优…...

编程新知 2026/5/17 7:07:57

基于LLM的游戏AI智能体：从感知到决策的框架构建与实践

1. 项目概述&#xff1a;一个能“玩”游戏的AI智能体最近在GitHub上看到一个挺有意思的项目&#xff0c;叫ChattyPlay-Agent。光看名字&#xff0c;你可能会觉得这又是一个基于大语言模型的聊天机器人。但点进去仔细研究后&#xff0c;我发现它的定位非常独特&#xff1a;这是一…...

编程新知 2026/5/17 6:33:52

基于IMAP的邮件自动化处理工具mymailclaw配置与实战指南

1. 项目概述&#xff1a;一个轻量级的邮件抓取与处理工具最近在折腾一个需要自动化处理邮件通知的小项目&#xff0c;发现市面上的方案要么太重&#xff0c;要么不够灵活。直到我遇到了psandis/mymailclaw这个项目&#xff0c;它就像一把小巧而锋利的瑞士军刀&#xff0c;专门用…...

编程新知 2026/5/17 6:14:51

湿版摄影×AI生成革命：为什么93%的MJ用户调不出真实碘化银斑痕？——资深暗房师+AI训练师双视角深度拆解

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;湿版摄影AI生成革命&#xff1a;为什么93%的MJ用户调不出真实碘化银斑痕&#xff1f;——资深暗房师AI训练师双视角深度拆解 湿版火棉胶摄影术诞生于1851年&#xff0c;其不可复制的物理噪点——由碘化…...

编程新知 2026/5/17 5:55:25

氛围驱动开发：数据化提升开发者效率与团队协作的实践指南

1. 项目概述&#xff1a;当开发节奏遇上“氛围感”最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“vibe-driven-dev”。光看名字&#xff0c;你可能会有点摸不着头脑——“氛围驱动开发”&#xff1f;这听起来不像是一个传统的技术框架或工具库。没错&#xff0c;它确实…...

编程新知 2026/5/17 3:58:33

如何让Photoshop图层批量导出速度提升3倍？这个开源脚本做到了！

如何让Photoshop图层批量导出速度提升3倍&#xff1f;这个开源脚本做到了&#xff01; 【免费下载链接】Photoshop-Export-Layers-to-Files-Fast This script allows you to export your layers as individual files at a speed much faster than the built-in script from Ado…...

编程新知 2026/5/17 3:46:04

龙芯3A6000平台Loongnix系统部署实战：从固件更新到驱动配置全解析

1. 项目概述&#xff1a;一次国产平台上的系统部署实战最近&#xff0c;我拿到了一台基于龙芯3A6000处理器和7A2000桥片的国产台式机。对于长期在x86/ARM生态里打转的开发者来说&#xff0c;这无疑是一个充满新鲜感和挑战的“新玩具”。它的核心使命&#xff0c;就是运行龙芯社…...

编程新知 2026/5/17 3:08:51