盆盆罐罐

上海邦麦信息科技有限公司旗下子网站;POS系统、计算机技术资料搜集

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]

对本文发表评论





3 + 3 = ?

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