HTML-如何让网站变成灰色？

news2024/9/25 1:16:01

在某些特定的时候，我们经常会看到网站会将整体布局设置成灰色色调，以示哀悼。

那么这是怎么实现的呢？

我去查了下相关的文章，发现是通过CSS的 过滤器函数 实现的，详见：grayscale()。

grayscale:对图片进行灰度转换

filter: grayscale(0);

不是灰度
在这里插入图片描述

filter: grayscale(60%);

在这里插入图片描述

filter: grayscale(1);

全灰
在这里插入图片描述

至于具体怎么用的话，就是怎么将CSS嵌套进HTML的方式了。

方法1：CSS文件

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

各种浏览器兼容版本

html {
	-webkit-filter: grayscale(100%);
	
	/* webkit */
	-moz-filter: grayscale(100%);
	
	/*firefox*/
	-ms-filter: grayscale(100%);
	
	/*ie9*/
	-o-filter: grayscale(100%);
	
	/*opera*/
	filter: grayscale(100%);
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	filter: gray;
}

方法2：HTML的style属性

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

方法3：HTML的内联样式

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

参考：

  • grayscale
  • 如何让网站变成灰色？
  • 如何让网页变灰

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

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

相关文章

MySql性能优化（三）执行计划详解

MySql性能优化（三）执行计划详解

执行计划 执行计划执行计划概述idselect_typetabletypepossible_keyskeykey_lenrefrowsextra官网地址 在具体的应用当中&#xff0c;我们排查sql有没有走索引&#xff0c;性能如何&#xff0c;需要查看Sql语句具体的执行过程&#xff0c;以方便我们调整sql来加快sql的执行效率。…
阅读更多...
如何通过 IntelliJ IDEA 来提升 Java8 Stream 的编码效率

如何通过 IntelliJ IDEA 来提升 Java8 Stream 的编码效率

小新再次推荐一篇 &#xff0c;主要是讲如何通过 IntelliJ IDEA 来提升 Stream 的编码效率&#xff0c;算是一个小技巧&#xff0c;经常使用 Java8 Stream 流的小伙伴们&#xff0c;可以试下&#xff0c;能够提升工作效率哦&#xff01; 一、Java8 Stream API 的不友好性 Java…
阅读更多...
02优先队列和索引优先队列-优先队列-数据结构和算法(Java)

02优先队列和索引优先队列-优先队列-数据结构和算法(Java)

文章目录1 概述1.1 需求1.2 优先队列特点1.3 优先队列分类1.4 应用场景1.5 相关延伸2 说明3 索引优先队列3.1 实现思路3.2 API设计3.2 代码实现及简单测试5 主要方法讲解5.1 exch()5.2 insert()5.2 poll()6 分析7 后记1 概述 普通的队列是一种先进先出的数据结构&#xff0c;元…
阅读更多...
JMeter连接Oracle过程及常见问题总结

JMeter连接Oracle过程及常见问题总结

如果被测试系统使用的数据库不是MySQL而是Oracle&#xff0c;如何用JMeter进行连接呢&#xff1f; 一、下载数据库驱动 需要确认数据库的版本&#xff0c;可以上网站下载驱动&#xff1a;https://www.oracle.com/database/technologies/jdbc-ucp-122-downloads.html。 或者直…
阅读更多...
【Linux】进程间通信-共享内存

【Linux】进程间通信-共享内存

前言 我们知道&#xff0c;在Linux中&#xff0c;进程是相互独立存在的&#xff0c;不存在直接让进程之间互相通信的方式。但是如果我们能让不同进程之间见到同一块内存&#xff0c;也就是都能读写这片区域是不是就能够达到进程间通信呢&#xff1f; 事实证明确实如此。在之前我…
阅读更多...
【springboot进阶】基于starter项目构建（二）构建starter项目-fastjson

【springboot进阶】基于starter项目构建（二）构建starter项目-fastjson

目录 一、创建 fastjson-spring-boot-starter 项目 二、添加 pom 文件依赖 三、构建配置 四、加载自动化配置 五、打包 六、使用 这个系列讲解项目的构建方式&#xff0c;主要使用 父项目 parent 和 自定义 starter 结合。项目使用最新的 springboot3 和 jdk19。本系列的…
阅读更多...
kinect v2安装iai_kinect2

kinect v2安装iai_kinect2

目前已完成 前期已经安装了libfreenect2 使用的系统为ubuntu 18.04 使用的相机为kinect v2 已经安装好了orb_slam3&#xff0c;已经完成使用stereo在euroc数据集和使用RGB-D在tum数据集上的测试 目的 想要完成使用深度相机进行在线测试 步骤 step1 经过查阅资料发现目前仅…
阅读更多...
大学生HTML期末作业, JavaScript期末大作业

大学生HTML期末作业, JavaScript期末大作业

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
Java项目：SSM设备台账管理系统

Java项目：SSM设备台账管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 管理员角色包含以下功能&#xff1a; 管理员登录,物理设备管理,IP地址资源管理,虚拟机管理,通知公告管理,学历管理,部门管理,员工管理等功能。 …
阅读更多...
DFS 数据结构 C++语言实现 图的深度优先遍历

DFS 数据结构 C++语言实现 图的深度优先遍历

1.DFS图解 图的深度优先遍历 1.1 基本定义&#xff1a; 设初始时&#xff0c;图中所有顶点未曾被访问过&#xff1a; ● 从图中某个顶点 v 出发&#xff0c;访问此顶点&#xff1b; ● 依次从 v 的未被访问的邻接点出发深度优先遍历图&#xff0c;直至图中所有和顶点 v 有路…
阅读更多...
【非下载vs解决】error: Microsoft Visual C++ 14.0 or greater is required

【非下载vs解决】error: Microsoft Visual C++ 14.0 or greater is required

首先说解决办法 搜索下载对应库的whl文件即可 下面是解决过程 部分报错为&#xff1a;error: Microsoft Visual C 14.0 or greater is required. Get it with “Microsoft C Build Tools”: https://visualstudio.microsoft.com/visual-cpp-build-tools/ 我是安装wordcloud库…
阅读更多...
Activemq安装和控制台

Activemq安装和控制台

目录 一、安装 二、后台服务启动 三、查看前台 一、安装 http://blog.csdn.net/gebitan505/article/details/55096222 二、后台服务启动 普通启动/关闭 到activemq的目录下执行【./activemq start/stop】进行开启和关闭activemq 带日志的启动 控制台不输出东西&#x…
阅读更多...
Stm32旧版库函数2——mpu6050 移植成旧版兼容型库函数DMP

Stm32旧版库函数2——mpu6050 移植成旧版兼容型库函数DMP

main.c: /******************************************************************************* // 陀螺仪 MPU6050 IIC测试程序 // 使用单片机STM32F103C8T6 // 晶振&#xff1a;8.00M // 编译环境 Keil uVision4 // 在3.3V的供电环境下&#xff0c;就能运行 // 波特率 9600 /…
阅读更多...
STM32通过DAC产生正弦波

STM32通过DAC产生正弦波

前言 这一讲主要来讲解DAC功能 文章目录 前言一、DAC简介二、DAC通道框图三、DAC输出电压四、输出正弦波五、代码一、DAC简介 数字/模拟转换模块（DAC）是12位数字输入，电压输出的数字/模拟转换器。DAC可以配置为8位或12位模式，也可以与DMA控制器配合使用。DAC工作在12位（1…
阅读更多...
[机缘参悟-93]：时间、空间、多维度、动态、全局、系统思考模型汇总

[机缘参悟-93]：时间、空间、多维度、动态、全局、系统思考模型汇总

目录 前言&#xff1a; 一、空间 - 广度 - 静态 - 多维度模型 1.1 一元太极本源模型 1.2 二元阴阳组合模型 1.3 三元铁三角稳定模型 1.4 四象限优先级模型 1.5 九宫格二维矩阵模型 二、空间 - 高度 - 静态 - 多层次模型 2.1 倒树形层次模型 2.2 金字塔层次结构模型 …
阅读更多...
新年新气象：Stimulsoft Designer 2023.1.0 Crack

新年新气象：Stimulsoft Designer 2023.1.0 Crack

使用 Stimulsoft Designer&#xff0c;您可以轻松设计从简单列表到多页、具有复杂计算、条件、函数和变量的报告。只需单击几下&#xff0c;您就可以创建易于理解且信息丰富的仪表板、设置过滤器以及对任何元素进行排序。Ω578867473 报表设计器很简单 这是一个不需要编程技能的…
阅读更多...
6 转移指令

6 转移指令

转移指令 1 数据存储位置的表示 我们定义的描述性符号&#xff1a; reg 和sreg 。使用描述性的符号reg 来表示一个寄存器&#xff0c;用sreg 表示一个段寄存器。 reg 的集合包括&#xff1a; ax 、bx 、ex 、dx 、ah 、al 、bh 、bl 、ch 、cl 、dh 、di 、sp 、bp 、si 、d…
阅读更多...
NAT (Network Address Translations) 网络地址转换

NAT (Network Address Translations) 网络地址转换

数据来源 1、ipv4地址严重不够用了 X.X.X.X X 0-255 A、B、C类可以使用 D组播 E科研 2、IP地址分为公网IP和私网IP 公网IP只能在公网上使用私网IP只能在内网中使用公网上不允许出现私有IP地址私网IP可以重复在内网使用1&#xff09;私有地址范围 10.0.0.0/8&…
阅读更多...
Vite+Vue3构建前端框架及模板代码及重要知识点

Vite+Vue3构建前端框架及模板代码及重要知识点

Vue3Vite构建步骤 用vite初始化vue项目(回车) npm create vitelatest vueVitePro -- --template vue安装配置路由vue-router npm install vue-router4 import router from ./router/index.js createApp(App).use(router).mount(#app) 安装 element-plus 及图标 npm ins…
阅读更多...
一个PCA加速技巧

一个PCA加速技巧

EVD-PCA PCA推导&#xff1a;PCA主成分分析法浅理解 具体数值如1030410304是我机器学习课程实验的数据集参数&#xff0c;这里关注数字量级即可。 code % EVD-PCA数据降维 % input: DN output:KN function [Z, K] EVD_PCA(X, K, weight)fprintf(Running EVD-PCA dimension…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023