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

15 浏览
0 Comments

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

这个问题已经有了答案：

如何将背景图像和CSS3渐变组合到同一个元素中？

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

在悬停时，顶部background-image不可见。当我没有悬停时，我可以通过为li设置单独的background-image以及将图标作为链接的背景图像来使其工作。我无法在这里执行相同的操作，因为我必须使用链接的悬停伪类来设置渐变背景图像。非常感谢您的任何建议。

admin 更改状态以发布 2023年5月21日
0

1 答案

0 Comments

您正在使用background-image属性来修改background-position/background-repeat属性。使用background简写属性（而非background-image），您可以使用如下代码：

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

其实就是这样：

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

根据规范，使用多个背景的语法如下：

[  , ]* 
 =  ||  [ /  ]? ||  ||  ||  ||  
 =  ||  [ /  ]? ||  ||  ||  ||  || <'background-color'>

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

在此处查看工作示例

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

0