多个背景图像 - 无法将图像带到前面[重复]

Posted 2023-03-06

【中文标题】多个背景图像 - 无法将图像带到前面[重复]

【英文标题】：Multiple background images - Can't bring image to the front [duplicate]

【发布时间】：2014-04-18 15:52:13

【问题描述】：

我正在使用 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 中的链接的背景图像，我能够在不悬停时使其工作。我不能在这里做同样的事情，因为我必须将链接的悬停伪类用于渐变背景图像。任何建议将不胜感激。

【问题讨论】：

你能提供一个小提琴吗？

【参考方案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);