使用滤镜属性将网页从彩色变黑白

在某些情况下,例如为了表达哀悼或纪念, 许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案,发现有些是通过javascript或jQuery实现的,我试了一下居然无效。
后来找到一个方法,是仅用一行CSS代码就能搞定的,只要对body使用滤镜filter: grayscale(100%);
完整代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>黑白灰度页面</title><style type="text/css">body{-webkit-filter: grayscale(100%);  /* Chrome, Safari, Opera */filter: grayscale(100%);    /*滤镜属性*/}h2{color:red}</style></head><body><h2>测试文本</h2><img src="./img/test.jpg" alt="彩色图片"></body>
</html>

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

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

相关文章

基于CNN-LSTM-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1卷积神经网络&#xff08;CNN&#xff09;在时间序列中的应用 4.2 长短时记忆网络&#xff08;LSTM&#xff09;处理序列依赖关系 4.3 注意力机制&#xff08;Attention&#xff09; 5…

MySQL 学习记录 2

原文&#xff1a;https://blog.iyatt.com/?p13818 13 存储引擎 查看一下前面创建的一张表的创建语句&#xff0c;当时并没有显式指定引擎&#xff0c;MySQL 自动指定的 InnoDB&#xff0c;即默认引擎是这个。 创建表的时候要显式指定引擎可以参考这个语句 查看当前 MySQL …

【牛客】SQL130 试卷发布当天作答人数和平均分

描述 现有用户信息表user_info&#xff08;uid用户ID&#xff0c;nick_name昵称, achievement成就值, level等级, job职业方向, register_time注册时间&#xff09;&#xff0c;示例数据如下&#xff1a; iduidnick_nameachievementleveljobregister_time11001牛客1号31007算…

rke方式安装k8s集群

一、新机环境准备 1.1主机名设置 hostnamectl set-hostname XXX1.2 主机名与ip地址解析 vim /etc/hosts 192.168.0.140 rke 192.168.0.147 master1 192.168.0.152 node1 192.168.0.153 node21.3安装docker tar -xf docker-20.10.24.tgz cp ${SHELL_FOLDER}/docker/*…

【java】19:内部类(3)

成员内部类&#xff1a; 1.可以直接访问外部类的所有成员&#xff0c;包含私有的 class Outer01{//外部类 private int n1 10; public String name "张三"; class Innter01{ public void say0(){ System.out.println("Outer01 的n1 " n1 " outer…

JWT基于Cookie的会话保持,并解决CSRF问题的方案

使用JWT进行浏览器接口请求&#xff0c;在使用Cookie进行会话保持传递Token时&#xff0c;可能会存在 CSRF 漏洞问题&#xff0c;同时也要避免在产生XSS漏洞时泄漏Token问题&#xff0c;如下图在尽可能避免CSRF和保护Token方面设计了方案。 要点解释如下&#xff1a; 将JWT存入…

Snagit 2024:让你的屏幕活动瞬间变得生动有力 mac/win版

Snagit 2024 屏幕录制与截图软件是一款功能强大的工具&#xff0c;专为现代用户设计&#xff0c;以满足他们在工作、学习和娱乐中对屏幕内容捕捉和分享的需求。这款软件结合了屏幕录制和截图功能&#xff0c;为用户提供了一种高效、便捷的方式来捕捉屏幕上的精彩瞬间。 Snagit…

xxl-job--01--简介

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.xxl-job1. 1 发展历史1.2 XXL-JOB的系统架构1.3 xxl-job与其他框架对比 2. XXL-JOB的使用2.1 准备工作- 配置调度中心XXL-JOB的数据表 2.2 配置执行器1 引入依赖包…

vue cesium加载点与定位到指定位置

vue cesium定位到指定位置 window.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(point.longDeg, point.latDeg, 6500000), orientation: {heading: 6.2079384332084935, roll: 0.00031509431759868534, pitch: -1.535}, duration: 3})vue cesium加载点 …

【蛀牙】如何选择牙刷,牙膏和牙杯(含其他日常牙具:牙线,漱口水,冲牙器)

程序员生活指南之 【蛀牙】如何选择牙刷&#xff0c;牙膏和牙杯&#xff08;含其他日常牙具&#xff1a;牙线&#xff0c;漱口水&#xff0c;冲牙器&#xff09; 文章目录 一、如何选择牙刷&#xff0c;牙膏和牙杯1、如何选择牙刷2、如何选择牙膏3、如何选择牙杯 二、日常牙具&…

为什么HashMap的键值可以为null,而ConcurrentHashMap不行?

写在开头 今天在写《HashMap很美好&#xff0c;但线程不安全怎么办&#xff1f;ConcurrentHashMap告诉你答案&#xff01;》这篇文章的时候&#xff0c;漏了一个知识点&#xff0c;知道晚上吃饭的时候才凸显想到&#xff0c;关于ConcurrentHashMap在存储Key与Value的时候&…

【Java】面向对象之多态超级详解!!

文章目录 前言一、多态1.1 多态的概念1.2 多态的实现条件1.3 重写1.3.1方法重写的规则1.3.2重写和重载的区别 1.4 向上转型和向下转型1.4.1向上转型1.4.2向下转型 1.5 多态的优缺点1.5.1 使用多态的好处1.5.2 使用多态的缺陷 结语 前言 为了深入了解JAVA的面向对象的特性&…

基于yolov5的电瓶车和自行车检测系统,可进行图像目标检测,也可进行视屏和摄像检测(pytorch框架)【python源码+UI界面+功能源码详解】

功能演示&#xff1a; 基于yolov5的电瓶车和自行车检测系统_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov5的电瓶车和自行车检测系统是在pytorch框架下实现的&#xff0c;这是一个完整的项目&#xff0c;包括代码&#xff0c;数据集&#xff0c;训练好的模型…

协程库项目—日志模块

日志模块程序结构图 sylarLog ├── LogLevel&#xff08;日志级别封装类&#xff09; │ ├── 提供“从日志级别枚举值转换到字符串”、“从字符串转换相应的日志级别枚举值”等方法 ├── LogEvent&#xff08;日志事件类&#xff09; │ ├── 封装日志事件的属性…

Unity(第二十一部)动画的基础了解(感觉不了解其实也行)

1、动画组件老的是Animations 动画视频Play Automatically 是否自动播放Animate Physics 驱动方式&#xff0c;勾选后是物理驱动Culling Type 剔除方式 默认总是动画化就会一直执行下去&#xff0c;第二个是基于渲染播放&#xff08;离开镜头后不执行&#xff09;&#xff0c; …

高性能服务系列【二】CPU和内存

现代计算机的系统架构十分复杂。在服务器中&#xff0c;双路处理器已经十分常见。最近Arm处理器实现双路共384核心&#xff0c;要知道目前Linux内核最高只支持256核&#xff0c;这就有点尴尬。 多路处理器将越来越普遍&#xff0c;对性能的影响和传统架构有不小的差别&#xf…

MySQL中json类型的字段

有些很复杂的信息&#xff0c;我们一般会用扩展字段传一个json串&#xff0c;字段一般用text类型存在数据库。mysql5.7以后支持json类型的字段&#xff0c;还可以进行sql查询与修改json内的某个字段的能力。 1.json字段定义 ip_info json DEFAULT NULL COMMENT ip信息, 2.按…

GO基本类型一些记录

基本类型一些记录 1.直接粘贴文本进println(" ")2.中文字符串长度别用len( )3.byte本质是uint8 1.直接粘贴文本进println(" ") GoLand会自动补充转义符 2.中文字符串长度别用len( ) 用相应编码库的方法&#xff0c;一般utf8即可 utf8.RuneCountInStrin…

PySide6实现word转化pdf

目录 一:实现思路 二:实现代码 三:完整代码和界面 一:实现思路 利用PySide6创建两个按钮和一个显示区域,一个选择文件按钮,一个转化按钮和信息展示,操作文件按钮选择一个待转化的word文档。并且展示文件路径到信息展示区,操作转化按钮,读取选择的文件转化为pdf。并…

ThreadLocal介绍

文章目录 ThreadLocal源码分析&#xff1a;set方法get方法remove方法 ThreadLocal内存泄漏问题 ThreadLocal ThreadLocal提供了线程局部变量&#xff0c;每个线程都可以通过set和get方法来对这个变量进行操作&#xff0c;但不会和其他线程的局部变量冲突&#xff0c;实现了线程…