特殊日子或哀悼日里如何让整个网站网页色调变灰

原创 老王  2020-04-17 10:36:54  阅读 1072 次 评论 0 条
摘要:

在特殊的日子里或者哀悼日我们站长最好让整个网页色调变灰,以示哀悼。那么如何让整个网页色调变灰呢?需要设置滤镜蒙版,具体的操作就是给页面加一个标签即可!

表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

而我们站长最好让整个网页色调变灰,以示哀悼。

那么如何让整个网页色调变灰呢?

先来分析下原理学过PS或者达芬奇的朋友应该都有整个概念,蒙版!最简单的就是给整个网页增加一个灰度的蒙版即可。转换成web中html代码就相当于对html标签进行设置!转换到css3样式这是,就是给页面增加一个灰度滤镜设置灰度值即可,那么就用到一个filter

网页色调变灰filter滤镜属性值:

 

特殊日子或哀悼日里如何让整个网站网页色调变灰实现如下:

html {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}自己尝试一下,如果单独对图片或者其他的设置也是一个道理,设置对应的选择器和属性值即可!

特殊日子或哀悼日里如何让整个网站网页色调变灰  第1张果你后台可以直接添加CSS样式,就单独添加,如果没有设置,就需要header里面统一设置即可!

效果如下:

特殊日子或哀悼日里如何让整个网站网页色调变灰  第2张


本文地址:http://wangfangwen.com/post/44.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?