我有一个 CSS 精灵,如下所示:
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?
你可以看看 CSS 灰度滤镜。它的思路是:
#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 */;
}
Just don't forget to add the other hundred things you need for cross browser support
我找到了另外一百件事并添加了它们。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)