WordPress实现单页面变灰的教程

WordPress全站变灰的实现很简单，但具体单文章页变灰就比较少见。

实现全站变灰效果的代码如下：

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

而如果想在单独的文章页面实现变灰效果，在两端加入：

<style>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- */
}</style>

将上面的代码加入文章，代码界面（wordpress是文本，即非可视化页面），或后台文章编辑——添加区块——小工具——自定义HTML代码。

建议放在文章最末尾，这样列表页截取的文字不会截取到代码，而是截取到文字正文。

这样，当某些文章页面需要变灰的时候，可以将以下代码直接加到主题自定义样式中或者某个文章页面中即可实现。

👋 感谢您的观看！