CSS 实现灰度主要是利用 Filter 属性，无需经过 JavaScript 或 PHP 脚本，CSS3 Filter 广泛支持大部分旧版本和最新版本的 Firefox、Safari 和 Chrome 浏览器，甚至是 IE 浏览器，总的来说，这个方法不算复杂，比 JS 实现轻巧许多。

先在 WordPress 的 style.css 文件中定义一个图片的 div class，比如 graypicture，代码如下：

.graypicture img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1);
filter: gray;
}

若要支持 Firefox，还需要使用 SVG filter，将如下代码保存为 desaturate.svg 文件，放于主题文件夹下（我这里放在主题的 include 文件夹）：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<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>

上面定义图片的 div class=graypicture 的代码增加一行改为：

.graypicture img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1);
filter: gray;
filter: url(includes/desaturate.svg#greyscale);
}

针对鼠标悬浮恢复彩色效果，代码如下：

.graypicture img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
-webkit-filter: grayscale(0);
filter: none;
}

然后在欲要实现这种效果的图片的代码处加上 div class="graypicture"值即可。

以上代码支持 IE、Chrome 和 Firefox，不支持 Safari。

参考资料：WordPress CSS 实现灰度图片+悬浮效果恢复彩色