CSS渐变，背景图像在悬停时消失

问题描述：

顶部nov上的facebook标志消失在悬停上。我有css渐变应用，没有图像除了fb标志本身。有没有办法让徽标在悬停状态下保持可见状态？CSS渐变，背景图像在悬停时消失

css file here

谢谢！

page here

请在像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

答

或者，您可以将图标与背景分开。也就是说，使用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; 

}

希望有所帮助！

值得注意的是，IE 7和更低版本将不支持伪元素：before或：after。 http://css-tricks.com/browser-support-pseudo-elements/ – cdwyer 2012-08-16 16:51:01

谢谢！我不敢相信我没有想到这一点。非常容易。我不会支持较老的IE。谢谢！ – Kim 2012-08-16 17:24:34

没问题;很高兴它对你有效！ =） – cdwyer 2012-08-16 17:27:12

答

您需要使用多个背景，因为上悬停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

CSS渐变，背景图像在悬停时消失

相关推荐