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

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