在悬停时更改PNG图像的颜色?

时间:2011-03-27 13:12:08

标签: css hover

我将这些图标http://grab.by/9HYW添加到我的网站,并希望在悬停时更改颜色...什么是最佳解决方案?

图标采用png格式,并希望在悬停时更改为蓝色...提前感谢。

4 个答案:

答案 0 :(得分:4)

您应该使用编辑器(您创建第一个图标的那个)生成新的蓝色图像,然后使用css hover

答案 1 :(得分:3)

您可以使用css sprite(可以说是最干净,最跨浏览器的可比方式),其中您基本上在一个图像中同时具有常规状态和悬停状态,并在悬停时更改div的背景位置。 (xpixelz链接可以帮助你。)

如果图像实际打印在页面上,您可以使用javascript在悬停状态下以悬停状态滑动图像。

我不确定它们是如何在页面上显示的,但如果它们位于纯色背景上,您可以制作一个负空间的png并将其放在图像的确切宽度和高度的div中然后只需在悬停时更改div的背景颜色,因为实际徽标是透明的,您将看到父div的背景颜色。

答案 2 :(得分:1)

因为您可以选择CSS精灵 http://css-tricks.com/css-sprites/ 如果你需要一个快速的方法谷歌“css sprites generator”;)

答案 3 :(得分:1)

如果您使用平面png图标,则可以使用jFlat jquery插件。请记住,它仅支持HTML5支持的浏览器

来源:http://flaticon.sodhanalibrary.com/jFlat.html