微信二维码
微博二维码
qq号二维码

缅怀逝者,致敬英雄-纯css实现一键网页整体变灰

夏磊银 2020.04.04 111人浏览
纯css过滤样式实现网页整体变灰

2020年4月4日,星期六,清明节

北京时间10:00全国下降半旗默哀三分钟,向新冠肺炎疫情牺牲烈士和逝世同胞默哀!


英雄走好!今天,大江南北,长城内外,国家以最高的祭奠向英雄哀悼,人民以最深的怀念为英雄送行。

逝者安息!今天,江水呜咽,山川悲鸣,祖国母亲肝肠寸断,亿万同胞泪飞如雨。

互联网上、朋友圈中,人们自发参与哀悼活动,追思之情绵绵不绝。

举国哀悼,是对逝者的尊重与缅怀,也是对生命的关爱与珍视。

慎终追远,这庄严肃穆的仪式,寄托着血浓于水的同胞之情,也昭示着慨然前行的奋发之志。

逝者安息、生者奋进!

--央视


今天,大多数网站均显示为灰色,并且整体改变,作为程序员肯定有很多疑问是如何实现的呢?

其实仅仅只需要添加css的过滤属性就可以实现对应的改变,我们来看看对比图

首先,我们来看看百度的处理方案

缅怀逝者,致敬英雄-纯css实现一键网页整体变灰

缅怀逝者,致敬英雄-纯css实现一键网页整体变灰


通过添加:

body.qm-activity #head_wrapper, body.qm-activity #u, body.qm-activity #u1, body.qm-activity .s-top-left.s-isindex-wrap {

    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;

}

下面我们再来看看哔哩哔哩的实现方法:

缅怀逝者,致敬英雄-纯css实现一键网页整体变灰

缅怀逝者,致敬英雄-纯css实现一键网页整体变灰

通过添加:

html.gray {

    -webkit-filter: grayscale(.95);

}

最后我们看看CSDN的对比方式:

缅怀逝者,致敬英雄-纯css实现一键网页整体变灰

缅怀逝者,致敬英雄-纯css实现一键网页整体变灰

通过添加:

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);

}







分享到:
微信小程序之wx.uploadFile
  • 2019.11.30
  • 天津日语培训机构,零基础小白怎么选择机构?
  • 2020.05.25
  •