网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程

        在遇到特殊情况的时候，我们作为站长需要紧急将网站变灰的需求，在此小编给大家总结了几种方法，通过简单修改一下站点样式即可实现。一段代码让网站整体变灰。这里主要介绍的利用

filter: grayscale属性来实现。供大家学习交流。

网站变灰代码，一行代码让网站整体变灰

第一种：简单CSS网站变灰

一般主题都有自定义CSS样式设置页面，只需要将下面的代码放进去保存即可。若没有设置的地方，可以放在网站主题根目录的stly.css文件中：

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

第二种：Wordpress通过functions让网站整体变灰

以上方法不可用的话，在主题目录的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");

为了兼容多种浏览器标准，可以增加一下样式：

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;

}

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.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);
-webkit-filter: grayscale(1);
}

三、代码解析一下：

grayscale(amount) : 对图片进行灰度转换。

amount转换值的大小，可以是数字或百分比。
当值为 100% 时，灰度最大。
0% 时与原图没有区别。
0% 到 100% 之间的值会使灰度线性变化。
amount 为空时使用值为1。

filter: grayscale(50%);
filter: grayscale(0.9);

为了方便，可以在后台这样加入

<style type="text/css">
html {
	filter: grayscale(1)
}
</style>

还有一些其他的效果

/*blur 模糊*/
filter:blur(2px);

/*brightness 亮度*/
filter:brightness(25%);

/*contrast 对比度*/
filter: contrast(50%);

/*drop-shadow 阴影*/
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

/*opacity 透明度*/
filter: opacity(50%);

/*grayscale 灰度*/
filter: grayscale(80%);

/*sepia 褐色*/
filter: sepia(100%);

/*invert 反色*/
filter: invert(100%);

/*hue-rotate 色相旋转*/
filter:hue-rotate(180deg);

/*saturate 饱和度*/
filter: saturate(1000%);