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

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中。由于必须使用链接的hover伪类来设置渐变背景图像，因此我无法在这里执行相同的操作。如有建议，敬请指教。

- Tim Aych

---

你能提供一个 Fiddle 吗？ - Adam Fratino

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%;

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

[ <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'>

因此，您可以使用以下代码：

```html

这里是一个可行的示例

```

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); 

- Josh Crozier