程序员经验分享-hwhale

前端例程20211213：网页去色（以灰度形式显示）

2023-11-20

文章目录

前言

在每年的一些特殊的日子（比如公祭日等）很多网站会将页面整体去色以灰度形式显示，以示哀悼。这里将对网页中实现该功能进行简单说明。

实现与演示

使用CSS的 filter: grayscale(); 属性可以给元素添加灰度滤镜效果，grayscale() 参数可选 0-1 或 0%-100% ，默认为 1 （即 100% ）。

下面是个将网页整体去色的演示：
在这里插入图片描述
只要给html元素或是body元素或是使用（*）给所有元素添加灰度滤镜就可以实现网页去色效果了。

filter: grayscale(); 是给元素本身设置滤镜，另外有 backdrop-filter: grayscale(); 方式可以给元素背后的画面设置滤镜。

—— 完 ——

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Web与JS相关

前端

css

去色

滤镜

前端例程20211213：网页去色（以灰度形式显示） 的相关文章

  • Sass 与 BEM，继承选择器

    我正在使用 Sass 3 4 1 和 BEM 所以我的 scss 是 photo of the day title font size 16px 我希望每次将鼠标悬停在 photo of the day标题发生了一些事情 这很常见 所以通常

  • DOM更改后刷新浏览器悬停效果

    我有一个 css 已更改的元素 hover 我还有一些 javascript 可以改变元素的高度 但是如果 javascript 在 hoverstate 处于活动状态 即使高度变化将元素从鼠标下方移出 状态仍保持不变 另外 由于 java

  • Cocoa webview UserAgent“webkit-legacy”问题

    我解决了这个问题 请看下面所选的答案 我一直在努力寻找导致 OSX Cocoa 应用程序的 WebView 与 Safari 表现不同的原因 事实证明 用户代理是不同的 有点明显 并且我正在访问的网站不知道如何处理它 令人惊讶的是 它是ht

  • 您可以使用 CSS 或 JavaScript 创建渐变为不透明的渐变吗？

    WebKit 引入了创建 CSS 渐变的功能 例如 使用以下代码 webkit gradient linear left top left bottom from fff to 000 但是 是否可以使用 CSS 实现不透明度渐变 我希望渐

  • 当您点击外部时，Bootstrap 3 Mobile 导航不会崩溃

    当我单击 触摸菜单外部时 我的 Bootstrap 3 移动菜单确实会折叠 我可以想出一个解决问题的方法 document on touchstart click html not nav function navbar collapse

  • jquery菜单栏浮动顶部

    我试图使菜单栏不断浮动在浏览器的顶部 因此当他们向下滚动页面时 菜单栏仍位于顶部 我该怎么做呢 Regards CSS 标签position fixed 即使滚动 也会使其保持在屏幕上的同一位置 使用它 然后将其定位为top right b

  • 下拉菜单将导航栏向下推。如何避免呢？

    我是引导程序和网络开发的新手 我想构建一个具有两个导航栏的网页 并且根据屏幕尺寸 仅显示一个导航栏 对于屏幕尺寸 gt 768px 一切工作正常 至少看起来 对于较低的分辨率 下拉菜单将导航栏向下推到内容上方 如何避免这种情况 任何形式的帮

  • 单击按钮滚动到特定 div

    我有一个具有固定菜单和内容框 div 的页面 单击菜单时 内容框滚动到特定 div 到目前为止 一切都很好 这是这里的示例 https jsfiddle net ezrinn 8cdjsmb9 11 https jsfiddle net e

  • 打开我网站上的链接不起作用

    在我的网站上 我有一个我正在尝试获取工作的链接 我有一个遵循正常格式的链接 即 href 以 www youtube com 作为目标链接 并在末尾添加 target blank 当我单击该链接时 托管我的网站的网站会显示一条错误消息 当我

  • Shiny 中的模态对话框：可以调整宽度但不能调整高度

    在我的 Shiny 应用程序中 我有几个来自闪亮BS 包的模式窗口 我可以像这样调整这些模式窗口的宽度 tags head tags style HTML modal lg width 1200px abs 1 background col

  • jQuery：获取 HTML 表格第四行（仅）的第一列值

    我有一个名为 resultGridTable 的表 我有一个 jQuery 函数要在表的每一行上执行 在函数中 this 表示一行 对于第四行 我需要提醒 第四行 第一列值 我有以下代码 但它不起作用 我们怎样才能让它发挥作用呢 对于第五行

  • CSS 粘性页脚实现之间的区别？

    我发现了 CSS 粘性页脚的 2 种不同实现 Ryan Fait 粘页脚 http ryanfait com sticky footer http ryanfait com sticky footer 史蒂夫 哈彻粘页脚 http www

  • 在 Rails App 中实现 WrapBootstrap 主题

    我刚刚购买了一个 wrapbootstrap 主题 并尝试将其插入我的 Rails 应用程序中 一些 css 如填充 导航栏 字形图标 和大多数 javascript 无法正常运行 我将所有样式表和 javascript 分别复制到 ass

  • 如何在 CSS 中选择纯 HTML 文本？

    你们有人知道如何在 CSS 中选择纯 HTML 文本吗 我有以下结构 div p class caption caption1 p div class tabs div class moving bg div p class text ta

  • 动画和过渡的组合无法正常工作

    我一直在尝试添加一些基本的 CSS3 动画 目标是在按钮的单击事件上切换类 并根据添加的类对 div 进行动画处理 该代码对于 Firefox 中切换的第一次迭代完美运行 但对于 Chrome 等其他浏览器以及 Firefox 中的下一次迭

  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage

  • 如何让 ExtJS ComboBox 与文本一起显示？

    我想让以下内容显示在一行中 我尝试过使用样式浮动和显示 Show this input

  • Angular 2 + Semantic UI，组件封装打破风格

    我使用 Angular2 和 Semantic UI 作为 CSS 库 我有这段代码 div class ui three stakable cards a class ui card a a class ui card a a class

  • IE8 - 隐藏 div 内的表单，返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起

  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式

随机推荐

  • ltconfig: you must&nbs…

    在64位机器下编译libghttp碰到的问题 libghttp是gnome下的HTTP客户端库 实现http功能 可以替换curl 的http功能 在32位的机器上编译没问题 在64位的机器上 configure 不过去 错误信息是 ltc

  • vue+C#后台上传excel处理数据

    比较简洁的excel处理方法 希望对大家有所帮助 1 界面

  • POJ - 2325 Persistent Numbers

    The multiplicative persistence of a number is defined by Neil Sloane Neil J A Sloane in The Persistence of a Number publ

  • angular：ng add “@nguniversal/express-engine“提示Data path ““ must NOT have additional properties

    出现原因 未知 只知道有个项目能成功 拷贝这个项目uninstall后再次ng add也能成功 而其他项目无法成功 提示这个 解决办法 手动添加相关代码 一样能够运行 ssr

  • 《零基础入门学习Python》第061讲：论一只爬虫的自我修养9：异常处理

    高级语言的一个有些特性就是它可以从容不迫的处理每一个遇到的错误 不至于说遇到一个小错误就导致整个程序崩溃了 大部分高级语言处理错误的方法都是通过检测异常 处理异常来实现的 Python也是一样 用程序用代码进行互联网访问的时候 会出现异常是

  • Java设计模式之装饰者设计模式Decorator Pattern

    目录 一 基本概念 二 结构 1 图示 三 案例演示 被装饰对象的基类 一个接口 有cost 和description 两个抽象方法 具体被装饰的对象 实现上面这个接口 装饰者抽象类 基类 实现drink接口 具体的装饰者类 糖 具体装饰者

  • 图数据库中的空间值——实现图数据库内容在地理坐标系下展现

    一个帅气的boy 你可以叫我Love And Program 个人主页 Love And Program的个人主页 如果对你有帮助的话希望三连 支持一下博主 坐标参考系统 地理坐标系及地图经纬度拾取 笛卡尔坐标系 在这里插入图片描述 图数据

  • dev-c++官网位置和源码/库位置

    1 http devpaks org 2 http www bloodshed net 3 http www bloodshed net dev 转载于 https www cnblogs com vilyLei articles 1812

  • 亲爱的波特兰——CJ麦科勒姆告别信

    系列文章目录 精选优美英文短文1 Dear Basketball 亲爱的篮球 精选优美英文短文2 Here s to the Crazy Ones 致疯狂的人 我祝你不幸并痛苦 约翰 罗伯茨毕业致辞 Dear Portland You kn

  • 数据库学习笔记（9）——python连接数据库/python操作数据库/sql注入

    1 python连接数据库 1 不管是那一门编程语言都是不可以直接连接数据库的 需要有连接介质 连接池 2 python的连接池有 pymysql 或者 mysqlclient 3 在cmd中导入库 pip install pymysql

  • java文件上传

    简介 java文件上传 1 Commons FileUpload简介 1 Commons FileUpload组件 Commons是Apache开放源代码组织的一个Java子项目 其中的FileUpload是用来处理HTTP文件上传的子项目

  • C++类大小计算

    关于C 类大小计算 这在一本书 深度探索C 对象模型 一书中有非常详细的介绍 我这里归纳整理 本节讨论的是64位地址计算机 指针长度8字节 1 类的大小取决于以下成员 a 非静态成员变量 b 虚函数table c 数据对齐 d 空类 当然还

  • linux下makefile的CC和gcc

    参考自 http www cnblogs com zhouyinhui archive 2010 02 01 1661078 html CC gcc CC arm hisiv400 linux gcc 上面是经常遇到的makefile中编写

  • 阿兰·麦席森·图灵 介绍

    Alan MAthison Turing 英国数学家 逻辑学家 被称为 计算机科学之父 人工智能之父 她曾协助盟军破解德国的著名密码系统Enigma 帮助盟军取得了第二次世界大战的胜利 他对计算机的贡献在于他提出的有限状态自动机也就是图灵机

  • 微信支付商家转账到零钱功能使用教程

    之前的 企业付款到零钱 功能 微信支付已下架 以后用 商家转账到零钱 功能取代 下面介绍如何开通并使用该功能 从运营账户支出 首先需要先去了解一下微信支付的这3个账户的关系 商家转账到零钱 功能 是从运营账户转账给用户的 开通 商家转账到零

  • ATL字符串转换宏

    有比MultiByteToWideChar和WideCharToMultiByte更简单的字符串转换宏 你相信吗 头文件 d program files microsoft visual studio 8 vc atlmfc include

  • Flutter 碰到的各种坑 持续更新

    Android转flutter 也有1年多了 在新公司将一个产品用flutter从零开始开发 感觉flutter 还是不太稳定 各种问题还是比较多 总之这次体验还是比较差 Error on line 21 column 5 of pubsp

  • Kafka——Mac搭建kafka环境

    1 下载Kafka安装包 下载地址 将压缩包移动到 usr local mv kafka 2 12 3 1 0 tgz usr local 解压 tar zxvf kafka 2 12 3 1 0 tgz 2 启动 启动zookeeper

  • WEB安全测试手册

    概述 目的 适用读者 适用范围 注意事项 测试级别说明 测试过程示意图 1 服务器信息收集 1 1 运行帐号权限测试 1 2 Web服务器端口扫描 1 3 HTTP方法测试 1 4 HTTP PUT方法测试 1 5 HTTP DELETE方

  • 前端例程20211213：网页去色（以灰度形式显示）

    文章目录 前言 实现与演示 前言 在每年的一些特殊的日子 比如公祭日等 很多网站会将页面整体去色以灰度形式显示 以示哀悼 这里将对网页中实现该功能进行简单说明 实现与演示 使用CSS的 filter grayscale 属性可以给元素添加灰

热门标签