实现wordpress网站整体变灰效果

很多特殊的日子里,为了表达某种情感,我们需要把网站整体变灰。


那么如何实现wordpress网站整体变灰效果其实也很简单,以下搜集了几种方法:

1、使用style.css调用webkit-filter滤镜

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

上面的代码使用-webkit-filter将网站全局style.css添加灰度(grayscale)滤镜并将灰度调至100%。所以将代码添加至网站主题style.css的顶部即可实现将wordpress网站整体变灰效果。

2、添加functions.php函数

/*   网站整体变灰    */
function hui_head_css() {
    $styles = "";
        $styles .= "html{overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}";
    if ($styles) {
        echo "<style>" . $styles . "</style>";
    }
}
add_action("wp_head", "hui_head_css");

在主题functions.php的最后添加以上代码也可实现将wordpress网站整体变灰效果。这种方法同样是使用style滤镜实现的,与第一种方法殊途同归,只不过将滤镜添加到了主题模板函数中。

3、添加CSS滤镜代码,同样将网页中的色彩部分过滤掉

{
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;
}

这种方法与第一种也基本类似,不多介绍,至于使用哪种方式,请各位网友测试了这使用。

欢迎转载,转载请注明本文链接:众推不靠谱 » 实现wordpress网站整体变灰效果

吐槽 2


  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 全球骗术您好,站长!茫茫互联网的海洋中,你我的相遇已是缘分,希望今后我们可以经常来往,每一次留言,都是我对您最真挚的祝福,希望您可以过的快乐、幸福!我会一直为你默默加油! 我的博客:http://www.yibut.com 一直期待您的光临!回复
    • zoo谢谢,共同加油 :roll:回复