本文作者:温文曦

全国哀悼日网站全站变灰CSS代码

温文曦 3个月前 ( 04-03 ) 4254 抢沙发 百度已收录
全国哀悼日网站全站变灰CSS代码摘要: 4月4日举行全国性哀悼活动:全国下半旗志哀,10时起全国人民默哀3分钟。周五(4月3日)中国国务院办公厅在一则通知中指出,为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞...

4月4日举行全国性哀悼活动:全国下半旗志哀,10时起全国人民默哀3分钟。

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

国务院办公厅在通知中指出,按照国旗法规定当天应当升国旗的场所、机构和单位均应下半旗志哀。下半旗时,应当先将国旗升至杆顶,然后降至旗顶与杆顶之间的距离为旗杆全长的1/3处;降下时,应当先将国旗升至杆顶,然后再降下。

新型冠状病毒肺炎疫情阻击战打响以来,全国各地抗疫工作人员与同胞们一直都战斗在一线,

对他们的付出,文曦博客致以最崇高的敬意!

QQ图片20200403212108.jpg

为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。我们今天也来给出相关方法。

QQ截图20200403213804.png

下面给大家放一次性修改代码,直接放在CSS样式里面就可以了!

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


这种效果是用纯CSS来实现的。


filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

如果你想全站变灰,代码如下

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果你想只对于网站图片来实现灰度,代码如下

img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果只想针对部分图片,代码如下

/*这段代码只会对于class位grey的图片*/
img.grey{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}


文章版权及转载声明

作者:温文曦本文地址:https://www.vience.cn/blog/308.html发布于 3个月前 ( 04-03 )
文章转载或复制请以超链接形式并注明出处文曦博客

赞(11
阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,4254人围观)参与讨论

还没有评论,来说两句吧...