css - 修复悬停时的 CSS 精灵

Question

我在下一页的页脚为社交图标设置了 CSS 精灵：

http://www.javaexperience.com/

问题是我想在悬停时更改背景颜色，但是图像被隐藏了。以下是 4 个社交图​​标的 CSS 代码：

.social-bookmarks {list-style-type: none !important;margin: 0 !important;padding: 0 !important;}
.social-bookmarks li {display: inline !important;float: left !important;margin-bottom: 2px !important;margin-right: 2px !important;padding: 0 !important;width: auto !important;}
.social-bookmarks a {-moz-transition: all 0.3s ease 0s;display: block !important;float: left !important;height: 40px !important;margin: 0 !important;padding: 0 !important;text-indent: -9999px !important;width: 40px !important;background-color: transparent;}
.social-bookmarks .facebook a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:0px 0;}
.social-bookmarks .facebook a:hover {background-color: #3B5998;}
.social-bookmarks .google a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-40px 0;}
.social-bookmarks .google a:hover {background-color: #DD4B39;}
.social-bookmarks .rss a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-80px 0;}
.social-bookmarks .rss a:hover {background-color: #FE9900;}
.social-bookmarks .twitter a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-120px 0;}
.social-bookmarks .twitter a:hover {background-color: #48C4D2;}

如您所见，我正在尝试更改悬停时的背景颜色，但没有任何反应。关于如何解决它的任何想法？

Answer 1

图像/图标本身没有透明背景，因此您放置的任何颜色都不会显示，因为图像在顶部

因此，您需要更新该图像以具有透明背景，然后它应该可以工作

Answer 2

您的 PNG 没有透明背景……它们是纯白色的。去掉白色，另存为透明png，会让生活更轻松:)

Answer 3

尝试这个：

.social-bookmarks .facebook a {background: transparent url("/wp-content/themes/max/images/social.png") no-repeat 0 0;height:40px;width:40px;}

.social-bookmarks .facebook a:hover {background: #3B5998 url("/wp-content/themes/max/images/social.png") no-repeat 0 0;}