css - 多个背景图像 - 无法将图像置于前面

Question

这个问题已经有答案了:

How do I combine a background-image and CSS3 gradient on the same element? (20 个回答)

已关闭 9 年前。

我使用 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);