欢迎访问的小伙伴! 希望在这里能帮到你。有问题请多多指教~ 点击联系站长

一个属性让网站变成灰色 CSS filter

HTML 焦康阳 0评论

月初的时候清明节,4月4日当天全国也是一致默哀。

今年2020年也是多灾的一年,全世界爆发灾难。很多的英雄也是献出了自己宝贵的生命。全国降半旗,停止一切娱乐活动,这也是对那些抗战在第一线的人民的致敬和哀悼。

作为一个弱小的群体,也是在灾难面前无能为力。致敬英雄,4月4当天也是将我的个人网站换成了灰色主题。

网站变灰色

大家在哀悼日肯定看到很多网站主题变成了灰色,我也不例外。像腾讯、百度、爱奇艺等等直接也是将视频窗口关闭了。

大伙可以看到网站所有颜色都变为灰色,图片,菜单等等。

因为我对CSS不是非常精通,以为他们是用某个控件或者后台啥的直接将所有的CSS颜色改变了,后来细想了一下应该不是这样,肯定有方便的操作方式。

不会就找百度嘛!果断搜一波,答案很快就出来了。就是在CSS中添加filter属性,将灰度调为100%就ok了。

#搜索到方法,在标签中加入filter属性
filter: grayscale(100%);

#如果考虑到兼容性,可多写
-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);

搜到方法之后,可是不知道往哪加呀。仔细想了下网页主体全在body这个标签里面,果断将这个属性写到body这个标签里面,网页也是如预想般变为灰色,大功告成。

可是在访问网站过程中,怎么发现我首页的那个向上按钮失效了,然后看看别人的发现都好着,然后打开几个灰色主题网站F12看了下,发现人家的属性都是加在html这个标签里面的。原来html这个标签才是控制全局的。

#css中如下
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

#如果主题CSS文件不想找的话,也可以直接在html标签中加入style属性
<html style="-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);">
</html>

通过上述操作,网站已经变为灰色主题。而且也不影响别的功能。关于filter还有很多的用法,我也就不班门弄斧了。

最后,疫情还没结束,大家还是做好防范。美国都已经突破60W大关了,虽说很多人抱着幸灾乐祸的态度,但是毕竟是生命。而且客观来说,如果世界疫情没彻底解决,我们还是不能恢复到正常生活的,也是希望疫苗早点研发投入使用吧。

喜欢 (4)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址