实现网站变成灰色

全网网站变灰

要是在大人物去世的那几天(如2022年12月上旬,不久前)随手打开手机或者是打开网站,会发现百度、淘宝、CSDN、今日头条等等网站都变成了灰色。

淘宝网

今日头条

CSDN官网

大家可以看到全网所有的网站都变成了这样的灰色的,无论是按钮、图片、或者亦或者是flash动画,都成了灰色的。这个时候,我们会特别好奇,这是怎么做到的呢?

可能有人会认为,这是提前做好的一套网站css样式,然后在今天直接替换的,可是这样做的话成本实在是太高了,尤其像网站中的一些flash动画,那岂不是还要做一个黑白版本的?这样就太不现实了。

其实啊,大家不要想的太复杂了,想把一个网站变成灰色的,只需要几行代码就可以解决的。那么下面我们一起来看下,具体的实现方法吧。

功能实现

那我们就选择淘宝网的官网,然后打开浏览器的开发者工具,审查一下页面的源代码,选择源代码中的<html>标签,右边的样式中的样式:

html {  -webkit-filter: grayscale(100%); }

如果我们把这个样式给取消了,会发现网站的颜色就还原回来了。

淘宝网代码审查,找到设置网站灰色的样式

这样我们就知道了,原来淘宝网站能直接变成灰色,其实就是因为这个样式起作用了,而且还是全局的效果,因为它是作用在html的节点之上的。

淘宝网 代码还原后的效果 

 

另外,我们再来看看CSDN,同样的方式,代码审查下CSDN的官网的网页源码,会发现csdn上的代码有些不一样:

html {  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

CSDN官网 代码审查效果截图

 这种实现方式呢,相对而言兼容性会好一些,主要能兼容各种不同类型的浏览器。

至此,我们就知道了,想让一个网站编程灰色,其实只用设置一个全局样式就可以搞定的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值