纪念日页面变灰是怎么实现的( filter: grayscale(100%)；)

在一些特殊的日子，我们可能会把页面变成灰色，我还有印象，有一次是一个国家纪念日，全部网页都变成了灰色，当时的4399小游戏都不能玩，我们思考一下他是怎么做到的呢，肯定不能一个一个的去改样式，其实他是用到了一个css的滤镜属性。举个例子：

 <div class="contain"><h1>如何成为一个好的前端工程师</h1><h5>努力学习，不断进步</h5><img src="./image/1.jpeg" alt=""><img src="./image/10.jpeg" alt=""><img src="./image/11.jpeg" alt=""></div>
<style>h5 {color: red;}
</style>

效果：

要想变成灰色，我们可以直接在最外层盒子上添加filter滤镜，大家看一下css代码：

<style>.contain{filter: grayscale(100%);}h5 {color: red;}
</style>

效果：

纪念日页面变灰是怎么实现的( filter: grayscale(100%)；)相关推荐

word图片填充之后图片颜色变灰了_一文读懂如何快速实现网页页面变灰？
灰色显示百度首页今天早上醒来一看各大网站,为表示新冠肺炎疫情死难者的哀悼,各大网站均将页面变为灰色显示,显示的极为庄重肃穆.本文主要介绍常用网页页面快速变灰色的方法. CSS样式Filter属性对 ...
前端实现页面变灰功能(含 Flutter )
前端利用css3中新增的filter属性实现页面变灰功能.一键全局修改样式,加滤镜.加曝光等等.flutter 使用 ColorFiltered 包裹我们的根widget 实现页面变灰. 今天从前端 ...
grayscale.js插件使页面变灰
对于多数浏览器而言,使用以下代码即可使页面变灰 /* 页面变灰 */ #body{-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera * ...
nginx 配置网站页面变灰
nginx 配置网站页面变灰,主要是通过ngx_http_sub_module模块来进行配置,已经安装该模块的可以直接配置,未安装的需新增编译该模块新增模块编译可以参考以下文章 https://hu ...
让图片变灰白（如：如特殊日子，纪念日时整个页面变灰）
2019独角兽企业重金招聘Python工程师标准>>> 这里用到滤镜可以实现: html{ filter:gray;} 或用 html{filter:progid:DXImageT ...
html 整个页面变灰
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-fil ...
小米云服务用不了页面变灰点击也没反应
解决办法:下拉通知栏,然后按住自动同步图标,进入设置后选择开启同步.
H5把页面变灰的方法
一键改色,亲测可用: html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: g ...
网站变灰 filter: grayscale(100%)；
filter: grayscale(100%); 将其放到body元素的样式里面

纪念日页面变灰是怎么实现的( filter: grayscale(100%)；)

要想变成灰色，我们可以直接在最外层盒子上添加filter滤镜，大家看一下css代码：

纪念日页面变灰是怎么实现的( filter: grayscale(100%)；)相关推荐

最新文章

热门文章