真人同城炮约qq群_微信附近100块,一品楼全国论坛闲聊,附近100快餐二维码

一行CSS代码代码实现网页变灰特效

来源:凡高网络

时间:2020-04-04

阅读次数:0


今天是 2020 年 4 月 4 日,星期六,清明节。

我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降半旗,北京时间 10 点全国默哀三分钟,来致敬英雄们。同时今天一切公共娱乐活动也都会停止,包括直播、综艺、影视、游戏等等。

 

我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼,向所有在抗战在疫情前线的工作和医护人员致敬。我们每一个人的平安面前,都是英雄的人墙。

 

网站变灰

今天大家可以看到很多很多网站包括主页和内容也都已经变成了灰色,比如百度、B 站、爱奇艺、CSDN 等等。

大家可以看到全站的内容都变成灰色了,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?

有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了,而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实,解决方案很简单,只需要几行代码就能搞定了。

实现

我们选择一个网站,比如 B 站吧,打开浏览器开发者工具。

审查一下网页的源代码,我们可以发现在 html 的这个地方多了一个疑似的 class,叫做 gray,gray 中文即灰色。

变灰效果

可以看到,我们只要将下面这行 CSS 样式,加入到页面指定节点,即可实现网页变灰的效果。代码如下:

为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码:

 

html {

    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

    filter: grayscale(100%);

}

使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。Wordpress用户,可以在外观-自定义-额外CSS中添加该代码。

上新案例

用作品证明实力,网站建设行业排名前列

查看更多内容
您可以拨打电话与技术经理取得联系

029-88661315    159-299-75930

您也可以扫一扫在线咨询

为您免费定制专属方案

您想咨询哪些服务

高端网站设计
初创企业网站制作
小程序开发
安全运维
摄影服务