回答
或者,您可以将图标与背景分开。也就是说,使用CSS将图标放置在“facebook”文本之前,以便它完全独立于后台选择器。像这样:
li.facebook a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 16px; /* Width of your FB icon */
height: 16px; /* Height of your FB icon */
margin-top: -9px;
background-image: url("path_to_your_FB_icon.png");
background-repeat: no-repeat;
}
希望有所帮助!
您需要使用多个背景,因为上悬停Facebook的背景是由梯度覆盖。
ul#topnav li.facebook a:hover {
background-image: url("../pics/facebook-icon.png"),
linear-gradient(center top , #444444 0%, #A1A1A1 6%, #575757 100%);
/* facebook icon is on top of a linear gradient */
background-repeat: no-repeat, repeat;
background-position: 8px 2px, 0 0;
}
当然,您需要为所有供应商前缀添加此规则。 (-moz-
,-webkit-
,...)
嗨,谢谢你的回应!你的代码和我的外观不一样,我像这样添加到了CSS中,但是现在我失去了渐变并且图像正在移动。 – Kim 2012-08-16 17:08:27
你仍然需要'背景位置'和'重复'。这也支持多种背景,但很难找出如何将其与当前代码结合使用,因为您的css文件非常大,而且您的html文件非常复杂。如果你想用一个简单的例子做一个jsfiddle,那真的很有帮助。 – 2012-08-16 17:13:24
另外,请确保您删除了'ul#topnav li.facebook a:hover'的旧样式声明。 – 2012-08-16 17:17:59
- 1. 悬停的背景图像消失
- 2. css背景图像渐变
- 3. 背景图像在桌面上悬停时消失
- 4. CSS背景图像放置在:悬停
- 5. 当悬停时按钮图像背景消失
- 6. HTML/CSS悬停背景图像
- 7. 背景图像悬停CSS问题
- 8. CSS与背景图像和渐变?
- 9. 悬停背景图像在文本后消失
- 10. 悬停/缩放变换背景图像
- 11. css渐变背景
- 12. 渐变背景图像
- 13. 上面渐变CSS渐变和背景图像
- 14. CSS - 背景渐变和背景图像发送到底部
- 15. 悬停时的背景图像更改
- 16. 背景图像不显示时,悬停在CSS
- 17. 如何在我的CSS渐变背景图像上放置背景图像
- 18. 最好的方法来改变悬停的CSS背景图像
- 19. 背景图像在缩小时消失
- 20. li上改变李元素的背景:用css背景图像悬停
- 21. 悬停改变背景图像而不是背景颜色
- 22. 如何在图像上悬停时变暗背景
- 23. div背景图像在Firefox中悬停时变为空白?
- 24. 背景颜色不改变悬停CSS
- 25. CSS:悬停改变的背景 - 颜色
- 26. 在列表项上悬停背景颜色变化的渐变
- 27. 将鼠标悬停在标签改变矩形背景渐变
- 28. :悬停背景图像交换在IE6
- 29. 背景图像出现在悬停
- 30. 添加背景图像时不会出现CSS悬停效果
请在像http://jsfiddle.net或http://cssdesk.com – TheZ 2012-08-16 16:21:45
这样的网站上设置一个较小的测试用例(尽可能少的代码,只是为了说明问题)对不起,我忘了发帖链接到页面: http://www.hauppauge.com/index.htm – Kim 2012-08-16 16:28:14