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

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

分类:Wordpress

标签:, , , ,

已有 2 人 对 ”WordPress 中用 CSS 实现图片灰度+鼠标悬浮恢复彩色效果” 进行了评论

  1. Audit说道:

    研究越来越深入了啊~~我转投 typecho 了~~~

    [Reply]

    小喜 Reply:

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

    [Reply]

对本文发表评论





2 + 5 = ?

注意:
1、请勿单纯发表顶啊、打酱油之类无任何意义的评论,否则将被视为spam!谢谢合作!
2、但欢迎你留下对本文的看法或技术上的任何疑问,我会及时回复你。