清明节如何实现网站变灰

清明节当天，打开各大APP、网站发现页面全都一律变成了灰色，作为一枚前端渣，秉着虚心学习的态度，研究了下是如何实现的，发现用滤镜就可以实现了，当然，此’滤镜’非美颜相机的’滤镜’。

##方法一

直接在body上添加filter
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}

##方法二

在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

觉得以上两种方法不喜欢，很繁琐？没关系，接下去还有两种方法，总有一款你喜欢的。

##方法三

直接添加CSS样式
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);
}

##方法四

修改<html>标签，在其内加上内联样式
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

总而言之，方法都是一样的，只不过是调用的方式不同而已，换汤不换药。推荐方法一、三。

清明节如何实现网站变灰相关推荐

如何使用css实现网站变灰效果
目录示例代码分析 grayscale saturate 总结参考为了悼念新冠病毒牺牲的烈士,很多网站都在清明节那天把网站设置成了灰色. 示例我选择了几个网站,先来看看它们是如何实现网站变灰效 ...
4月4日网站变灰实录
4月4日网站变灰记录基本都是通过 grayscale 来实现的都不支持 IE 11 但在 IE 11 的情况下表现却各不相同 B站.A站.淘宝.京东.百度.虎扑.开源中国 B 站 html.gra ...
网站变灰，寄托哀思，让我们共同行动!( 图片、文字、Flash变灰)
网站变灰,寄托哀思,让我们共同行动! 在全局CSS定义中加入以下代码,可使除FLASH外的元素变灰 body { filter:progid:DXImageTransform.Microsoft.Ba ...
网站变灰CSS，多浏览器兼容版本
网站变灰CSS,多浏览器兼容版本: <style> body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: g ...
一行css代码让整个网站变灰, 通过js控制定点触发和关闭
今天是5.12是个特殊的日子,有的时候吧会把整个网站变灰的需求这个我们用css过滤器一行代码就能实现了 filter: grayscale(100%); 问题是出在定点触发这块,我们可以通过 ...
“网站变灰”的代码实现
网站变灰为了表示哀悼,当天很多网站把主页和内容都变成了灰色,比如百度.B 站.爱奇艺.CSDN 等等. CSDN&&爱奇艺&&百度等实现: html.gray {- ...
网站变灰小妙招-几行代码搞定
网站变灰不需要重写样式,几行代码搞定: html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grays ...
【2020.04.04缅怀英烈，哀悼英雄】哀悼日网站变灰代码
哀悼日网站变灰代码.昨晚加班把公司的多有网站全变设置完成,缅怀英烈,哀悼英雄.记住你们,因为你们我们变得安全,谢谢你们. 在全站的CSS中写入以下代码: html { filter:progid:DX ...
网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...

清明节如何实现网站变灰

清明节如何实现网站变灰相关推荐

最新文章

热门文章