WordPress如何实现整站一键变灰功能

2020-04-03 0 792

但是在一些特别悲伤的日子,或者是国难日期间,如果我们的博客网站还是那么的鲜艳就有点不好意思了,所以我们需要这样的一个功能:就是一键实现整站变灰的功能。

WordPress如何实现整站一键变灰功能

方法一:

经过学习,发现其实这个功能还是挺简单的,只需要在我们主题的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 "";
    }
}
add_action("wp_head", "hui_head_css");

方法二:

将这段代码加入主题文件夹下的style.css或div.css文件最底部,保存,到前台刷新一下,网页变灰色了吧,包括网站的广告、图片等整个网页变黑白了。

html {
	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,#grayscale");
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(1);
}
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1、如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
3、如有侵犯你版权的,请来信(邮箱:admin@mail.52muban.com)指出,核实后,本站将立即改正。
4、如有链接无法下载、失效或广告,请点击下面的报错或者联系我们处理!
5、以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的日常运营所需!

我爱模板网 wordpress教程 WordPress如何实现整站一键变灰功能 https://www.52muban.com/5577.html

专注网站开发,建设。

常见问题
  • 我们承诺演示效果图均和网站一模一样,如有不同,全额退款,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 本站所有源码版权归原作者所有,我爱模板网提供的源码只能用于学习研究,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务