Question

我正在使用CSS3渐变作为我的菜单按钮的背景颜色/悬停颜色，并且我无法在悬停时让我的一个背景（图标）出现在渐变上方。 CSS：

  #nav_menu a:hover {
    background-image: url("../img/menu_icon.png") no-repeat 3%, 50%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aa2329), color-stop(100%, #bb4d50));
    background-image: -webkit-linear-gradient(#aa2329, #bb4d50);
    background-image: -moz-linear-gradient(#aa2329, #bb4d50);
    background-image: -o-linear-gradient(#aa2329, #bb4d50);
    background-image: linear-gradient(#aa2329, #bb4d50); 
}

悬停时无法看到顶部背景图像。我没有在没有悬停的情况下通过为li设置单独的背景图像并将图标作为嵌套在li中的链接的背景图像来使其工作。我不能在这里做同样的事情，因为我必须使用链接的悬停伪类作为渐变背景图像。任何建议将不胜感激。

Answer 1

您正在使用background-image属性修改background-position / background-repeat属性。使用background shorthand property（不是background-image），您可以使用以下内容：

background: url("..") no-repeat 3%, 50%;

基本上只是：

background-image: url("..);
background-repeat:no-repeat;
background-position:3%, 50%;

现在，根据the spec - 对于多个背景，语法如下：

[ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> 
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

因此，您将使用以下内容：

WORKING EXAMPLE HERE

background: url("//placehold.it/100") no-repeat 3%, 50%,
           -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aa2329), color-stop(100%, #bb4d50)),
           -webkit-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
           -moz-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            -o-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            linear-gradient(#aa2329, #bb4d50);

多个背景图像 - 无法将图像带到前面

1 个答案: