在悬停的黑白CSS背景 [英] Black and white CSS background on hover
本文介绍了在悬停的黑白CSS背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个CSS sprite:
I have a CSS sprite like:
HTML
<a id="estates" href="http://www.domain.com/estate"></a>
CSS
#estates {background-position: -200px 0px;width: 96px;height: 90px;}
#estates {background: url("http://www.domain.com/images/sprite.png") no-repeat scroll 0% 0% transparent;float: left;margin: 22px -2px 30px 33px;}
当用户将鼠标悬停在链接上,将图像颜色更改为黑白,或者如果不能实现,则可以覆盖透明的png。
I would like when the user hovers over the link to change the image color to black and white or perhaps overlay a transparent png if that cannot happen?
推荐答案
您可以查看CSS灰度过滤器。它符合:
You can look into the CSS grayscale filter. It's along the lines of:
#estates:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */;
}
只要不要忘记添加其他百件你需要的东西对于跨浏览器支持
我发现了其他一百个内容并添加了它们。
I found the other hundred things and added them.
这篇关于在悬停的黑白CSS背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文