WordPress 中用 CSS 实现图片灰度+鼠标悬浮恢复彩色效果

   Updated: 2014-05-14 23:42       WordPress 中用 CSS 实现图片灰度+鼠标悬浮恢复彩色效果有 2 条评论

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 实现灰度图片+悬浮效果恢复彩色

2 comments on “WordPress 中用 CSS 实现图片灰度+鼠标悬浮恢复彩色效果

    1. 王小喜 Post author

      倒也没有啥深入,都是我平时遇到的然后就记录下来了。。。。我还是继续 WordPress 吧,现在把精力放内容上不想去折腾程序了

      Reply

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注