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

Question

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

css文件在这里

谢谢！

页面在这里

Answer 1

您需要使用多个背景，因为在悬停时，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-, ...)

Answer 2

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

}

希望有帮助！