两种方法实现wordpress全站变灰效果

昨天是4月4日,一个特别的日子。本身是清明节,加之这次又添加一项新冠状病毒牺牲者“全国性哀悼”。全国响应国务院号召,暂停公共娱乐措施,基本上所有游戏都进入了服务器停机,直播平台也全部暂停。小白看了一下,许多网站都变灰了。像一些知名大站,52pojie,acfun等。

一些小的wordpress博客也变灰了。这样的效果要怎么实现呢?其实很多主题有自带这个功能,比如qux,如果主题没有这个功能怎么办?

两种方法,纯代码来实现:

方法1:

将下面代码加入wordpress在后台外观,自定义里面的额外css里即可,鸟叔主题的话加在主题选项里的css里就可以了,到前台刷新一下,网页变灰色了吧,包括网站的广告、图片等整个网页变黑白了。

代码:

html{
-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- */
}

方法2:

代码加到<head></head>之间,即可直接实现全站灰色效果。

代码如下:

<!–[if IE]>
<style>
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>
<!–<![endif]–>
<!–[if !IE]><–>
<style>
html{
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\”http://www.w3.org/2000/svg\><filter .3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\/></filter></svg>#grayscale);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray;
-webkit-filter: grayscale(1);
}
</style>
<!–<![endif]–>

未经允许不得转载:自学控 - 自己建站也轻松 » 两种方法实现wordpress全站变灰效果

分享到: 更多 (0)
avatar
自己建站,一点一滴积累经验。

评论 抢沙发

评论前必须登录!

立即登录   注册

自学控[zixuekong.com]

关于本站
切换注册

登录

忘记密码 ?

切换登录

注册