在悬停时更改图像的灰度属性

时间:2013-03-27 16:38:57

标签: css grayscale

我已经把我到目前为止所做的事情放在了一个小提琴上:http://jsfiddle.net/U5pQs/

我正试图将鼠标悬停在蓝框(#prompt)上做两件事: 1)将房屋的图像(#picbw)改为黑白 2)在图像上显示带有文本的div(#text)

这是我为此过渡所拥有的代码:

#prompt:hover ~ #picbw {filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);}

2)工作,但我不能得到1)发生,我不明白为什么!

任何帮助都非常感谢:)

2 个答案:

答案 0 :(得分:2)

我发现的例子:http://jsfiddle.net/KDtAX/487/有悬停状态和关闭状态的过滤器,但是“#prompt:hover~#picbw”对我来说都没有做任何事情。当我将其更改为“#picbw:hover”并将其与我链接的示例相结合时,它就有效了。

1)你的css选择器不起作用:#prompt:hover~ #picbw
2)你的css不起作用,使用例子中的css
*并且您需要css3的所有浏览器前缀

#picbw {
    ...
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
#picbw:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -moz-filter: grayscale(100%)
}

答案 1 :(得分:1)

我认为这个帖子对于U来说非常有用。 Image Greyscale with CSS & re-color on mouse-over? 阅读本文。 检查此链接。 的 http://webexplorar.com/creating-grayscale-images-with-css/ http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

阅读本文:

我们过去曾使用各种黑客技术在浏览器中将图像从黑白转换为彩色。一种技术要求将两个图像堆叠在一起。另一个选择是使用画布。或者......我们可以使用灰度滤镜。

 img {
   -webkit-filter: grayscale(100%);
 }

在灰度函数中应用百分比时,请自己想一想,“在0到100%的范围内,我想要这个图像的灰度是多少?

当与CSS3过渡一起使用时,我们可以应用一个漂亮而干净的悬停效果。

 img {
   -webkit-transition: -webkit-filter 1s;
     }
 img:hover {
  -webkit-filter: grayscale(100%); 
     }

将来,您需要为其他浏览器提供前缀,但此时并不需要。无需应用Mozilla转换来容纳仅在Webkit中实现的过滤器(到目前为止)。