CSS:怎么把网站都变成灰色

当大家看到全站的内容都变成了灰色,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?
有人会以为所有的内容都统一换了一个 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)}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第三方数据库连接免费使用和安装

是强大的一体化数据库开发解决方案&#xff0c;可从单一应用程序无缝连接多个数据库&#xff0c;包括 MySQL、PostgreSQL、MongoDB、MariaDB、SQL Server、Oracle、SQLite 和 Redis。 下载&#xff1a;https://download.csdn.net/download/mo3408/90045937 升级特性 模型&…

python控制鼠标,键盘,adb

python控制鼠标&#xff0c;键盘&#xff0c;adb 听说某系因为奖学金互相举报&#xff0c;好像拿不到要命一样。不禁想到几天前老墨偷走丁胖子的狗&#xff0c;被丁胖子逮到。他面对警察的问询面不改色坚持自我&#xff0c;反而是怒气冲冲的丁胖子被警察认为是偷狗贼。我觉得这…

使用 exe4j 将 Spring Boot 项目打包为 EXE 可执行文件

使用 exe4j 将 Spring Boot 项目打包为 EXE 可执行文件 文章目录 使用 exe4j 将 Spring Boot 项目打包为 EXE 可执行文件什么是 exe4j准备工作打包 Spring Boot 项目为 EXE 文件1.启动 exe4j2. 选择项目类型3. 配置项目名称和输出目录4. 配置项目类型或可执行文件名称5. java配…

【操作文档】mysql分区操作步骤.docx

1、建立分区表 执行 tb_intercept_notice表-重建-添加分区.sql 文件&#xff1b; DROP TABLE IF EXISTS tb_intercept_notice_20241101_new; CREATE TABLE tb_intercept_notice_20241101_new (id char(32) NOT NULL COMMENT id,number varchar(30) NOT NULL COMMENT 号码,cre…

使用 pycharm 新建不使用 python 虚拟环境( venv、conda )的工程

有时候我们发现一个好玩的 demo&#xff0c;想赶快在电脑上 pip install 一下跑起来&#xff0c;发现因为 python 的 venv、conda 环境还挺费劲的&#xff0c;因为随着时间的发展&#xff0c;之前记得很清楚的 venv、conda 的用法&#xff0c;不经常使用&#xff0c;半天跑不起…

安全设备-日志审计-数据管理

7 日志审计系统数据管理 7.1 日志审计系统数据管理概述 日志审计系统数据管理系统自身数据存储管理&#xff0c;并对自身配置、采集的日志进行统一管理。 7.2 日志审计系统数据管理配置举例 7.2.1 用户场景 用户通过数据管理配置&#xff0c;实现对系统的备份、清理、转存…

简单的Activiti Modoler 流程在线编辑器

简单的Activiti Modoler 流程在线编辑器 1.需求 我们公司使用的流程是activiti5.22.0&#xff0c;版本有些老了&#xff0c;然后使用的编辑器都是eclipse的流程编辑器插件&#xff0c;每次编辑流程需要打开eclipse进行编辑&#xff0c;然后再导入到项目里面&#xff0c;不是特…

玩转 uni-app 静态资源 static 目录的条件编译

一. 前言 老生常谈&#xff0c;了解 uni-app 的开发都知道&#xff0c;uni-app 可以同时支持编译到多个平台&#xff0c;如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点&#xff0c;让开发者可以使用同一套代码基于 Vue.js 的语法编写程序&#xff0c;然…

云技术-docker

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团…

Java基础夯实——2.9 多线程如何共享数据

在 Java 多线程编程中&#xff0c;共享数据通过以下几种方式实现&#xff1a; 1. 使用共享对象 多个线程可以通过引用同一个对象来实现数据共享。例如&#xff1a; class SharedData {private int count;public synchronized void increment() {count;}public synchronized …

如何将Asp.net Core站点部署到CentOS

我们要想在linux系统中运行asp.net core程序&#xff0c;有两种方式&#xff1a; 直接部署在linux系统中通过docker镜像部署在linux系统中 今天就来看下&#xff0c;如何直接把asp.net core应用站点部署到CentOS中&#xff01; 安装.NET Core SDK 添加微软包地址到rpm&…

【C++】从C语言到C++学习指南

如果你也是从C语言一路过来的&#xff0c;那么请一起看下去吧&#xff01; 文章目录 面型对象程序设计C基础C和C一些语法区别C在非对象方面对C语言的扩充C的一些标准&#xff08;兼容旧标准&#xff09; 首先&#xff0c;在C的学习中&#xff0c;我们要时刻清醒一点&#xff1…

【FPGA开发】Vivado自定义封装IP核,绑定总线

支持单个文件的封装、整个工程的封装&#xff0c;这里用单个文件举例。 在文件工程目录下&#xff0c;自建一个文件夹&#xff0c;里面放上需要封装的verilog文件。 选择第三个&#xff0c;指定路径封装&#xff0c;找到文件所在目录 取个名&#xff0c;选择封装IP的路径 会…

CA系统(file.h---申请认证的处理)

#pragma once #ifndef FILEMANAGER_H #define FILEMANAGER_H #include <string> namespace F_ile {// 读取文件&#xff0c;返回文件内容bool readFilename(const std::string& filePath);bool readFilePubilcpath(const std::string& filePath);bool getNameFro…

深入理解 MySQL 锁机制:分类、实现与优化

在高并发的数据库应用中&#xff0c;锁机制是保障事务在操作数据库时数据一致性和完整性的重要工具。MySQL 提供了多种类型的锁&#xff0c;不同的存储引擎和场景下的实现各具特点。本篇文章将详细介绍 MySQL 锁的分类、实现&#xff08;主动与被动&#xff09;以及优化策略。 …

前端-Git

一.基本概念 Git版本控制系统时一个分布式系统&#xff0c;是用来保存工程源代码历史状态的命令行工具 简单来说Git的作用就是版本管理工具。 Git的应用场景&#xff1a;多人开发管理代码&#xff1b;异地开发&#xff0c;版本管理&#xff0c;版本回滚。 Git 的三个区域&a…

QT配置文件详解

TEMPLATElib TEMPLATE变量用于指定项目模板类型&#xff0c;其值可以是以下几种&#xff1a; app&#xff1a;建立一个应用程序的makefile&#xff0c;这是默认值。lib&#xff1a;建立一个库的makefile。vcapp&#xff1a;建立一个应用程序的Visual Studio项目文件。vclib&a…

深入浅出摸透AIGC文生图产品SD(Stable Diffusion)

hihi,朋友们,时隔半年(24年11月),终于能腾出时间唠一唠SD了🤣,真怕再不唠一唠,就轮不到SD了,技术更新换代是在是太快! 朋友们,最近(24年2月)是真的没时间整理笔记,每天都在疯狂的学习Stable Diffusion和WebUI & ComfyUI,工作实在有点忙,实践期间在飞书上…

Maven 如何配置忽略单元测试

在使用 Maven 进行项目构建时&#xff0c;有时您可能希望跳过测试阶段。 这在确保代码更改不影响测试结果或需要快速部署项目的情况下特别有用。 Maven 提供了多种方法来在构建过程中跳过测试。 为什么跳过测试&#xff1f; 加速构建&#xff1a;对于具有大量测试用例的大项…

面试(十一)

目录 一.IO多路复用 二.为什么有IO多路复用机制? 三.IO多路复用的三种实现方式 3.1 select select 函数接口 select 使用示例 select 缺点 3.2 poll poll函数接口 poll使用示例 poll缺点 3.3 epoll epoll函数接口 epoll使用示例 epoll缺点 四. 进程和线程的区别…