博客
关于我
简单实现网站灰色效果以谨记2020年4月4日悼念日
阅读量:534 次
发布时间:2019-03-08

本文共 835 字,大约阅读时间需要 2 分钟。

一、悼念日——2020年4月4日——清明节

2020年4月4日是全国抗击新冠肺炎疫情展示的崇高/configuration。作为表达对抗疫英雄和逝世同胞的深切哀悼,国务院决定在这一天全国性地举行哀悼活动。全国和驻外领事馆的国旗全天下半旗征,所有公共娱乐场所暂停营业。在10点,全国人民将进行三分钟默哀。交通工具包括汽车、火车、舰船将鸣笛震撼,防空警报声也将响起。在此同时,互联网平台也响应号召,采用特殊形式的默哀方式,将页面界面变为灰色。

二、技术实现与网页展示

通过简单的技术手段,实现了网页灰色显示的特效。这一功能模拟了悼念期间互联网平台的特殊显示方式。

三、实现网页图片灰色显示

要实现网页中的图片变为灰色,只需在CSS样式文件中添加以下代码即可:

{    /*支持的浏览器 Chrome, Safari, Opera*/  img {     /*90%也可以写成小数形式0.9*/     -webkit-filter: grayscale(90%);     filter: grayscale(90%);   }}

这一方法适用于支持 Müzhi兄弟提到的浏览器,能够实现图片灰度显示的效果。技术实现简洁易懂,仅需添加CSS代码即可完成

四、实现网页整体灰色显示

如果需要整个网页界面变为灰色,并且仍然支持图片灰色显示,可以在CSS样式文件中添加以下代码:

{    /*支持的浏览器 Chrome, Safari, Opera*/  body {     /*90%也可以写成小数形式0.9*/     -webkit-filter: grayscale(90%);     filter: grayscale(90%);   }}

只需简单的样式修改即可实现网页整体灰色显示,与图片模块无关,适用于需要全局灰色显示的项目中

通过上述技术手段,能够快速实现网页灰色显示效果,无需复杂的开发过程。这种方式完全符合现代网页开发规范,同时也适配多种主流浏览器

转载地址:http://wrsiz.baihongyu.com/

你可能感兴趣的文章
PostgreSQL学习总结(7)—— PostgreSQL 语句 INSERT INTO、SELECT、UPDATE、DELETE 等学习
查看>>
PostgreSQL学习总结(8)—— PostgreSQL 基于数据库和基于模式(schema)的多租户分析
查看>>
PostgreSQL学习总结(9)—— PostgreSQL 运算符与表达式
查看>>
PostGreSql学习笔记001---PostgreSQL10.4安装(Windows)_支持PostGreGis_PostJDBC
查看>>
PostGreSql学习笔记002---Navicat Premium中管理PostGreSql 错误:字段rolcatupdate 不存在
查看>>
PostgreSQL学习笔记:PostgreSQL vs MySQL
查看>>
PostgreSQL实现shape数据转geojson数据(地图工具篇.18)
查看>>
PostgreSQL导入shape数据(地图工具篇.10)
查看>>
PostGreSql工作笔记003---在Navicat中创建数据库时报错rolcatupdate不存在_具体原因看其他博文_这里使用pgAdmin4创建管理postgre
查看>>
PostGreSql工作笔记004---PostGreSql修改密码_windows和linux下修改
查看>>
Postgresql常用命令行操作_以及Navicat操作PostGis时的问题_自动截取长度_WKB structure does not match exp---PostgreSQL工作笔记005
查看>>
PostgreSQL忘记密码
查看>>
PostgreSQL数据库pg_dump命令行不输入密码的方法
查看>>
PostgreSQL新手入门
查看>>
postgresql树状结构查询示例
查看>>
PostgreSQL流复制参数max_wal_senders详解
查看>>
postgresql流复制配置
查看>>
PostgreSQL清空表并保留表结构、清空数据库还原数据库为新建时的状态的方法
查看>>
PostgreSQL的 initdb 源代码分析之九
查看>>
PostgreSQL的安装与使用指南
查看>>