CSS。如何在背景上添加小图像？答案

【问题标题】：CSS. How to add small image on background?CSS。如何在背景上添加小图像？
【发布时间】：2013-12-19 09:21:03
【问题描述】：

我正在使用 CSS 创建自定义（渐变）按钮。单击按钮时，它应该出现小箭头（arrow.gif）。它在我使用 background-color: 属性之前有效。现在我使用：

a.nav_selected:link, a.nav_selected:visited {
    display:block;
    float:left; 
    padding:0px; 
    margin:0;
    width: auto;
    margin:0px 14px 0px 14px;
    text-align:center;
    text-decoration:none; 
    color: black; 
    margin:0px 0px 0px 0px;
    padding:0px 14px 0px 14px;
    background:url(images/arrow.gif) no-repeat top center;
    background-image: -o-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    background-image: -moz-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    background-image: -webkit-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    background-image: -ms-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    opacity: 0.85;  
}

如果我在代码底部使用background:url(images/arrow.gif) no-repeat top center;（在 background-image:... 之后），则会出现箭头，但这里没有渐变背景。如何使其出现以及箭头和背景？谢谢。

更新

现在我的代码如下所示：

a.nav_selected:link, a.nav_selected:visited {
display:block;
float:left; 
padding:0px; 
margin:0;
width: auto;
margin:0px 14px 0px 14px;
text-align:center;
text-decoration:none; 
color: black; 
margin:0px 0px 0px 0px;
padding:0px 14px 0px 14px;
background-image: -o-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
background-image: -moz-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
background-image: -webkit-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
background-image: -ms-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
opacity: 0.85;  
position: relative;
}
a.nav_selected:link:after,
a.nav_selected:visited:after {
    position: absolute;
    right: 2px;
    top: 7px;
    content: '';
    display: block;
    background:url(images/arrow.gif) no-repeat top center;
}

但我遇到了同样的问题，只出现了渐变背景，这里没有动画箭头。

【问题讨论】：

你用background-image覆盖background:url(images/arrow.gif) no-repeat top center;
没有跨浏览器的方法来使用多个背景图像。浏览器将渐变视为背景图像。
谢谢你的回答，所以没有办法做到这一点？
@RimantėBaltiejūtė 请查看我的答案和相关的 jsFiddle。

标签： image css background gradient

【解决方案1】：

浏览器将背景渐变视为背景图像。当您添加 background 的第一个定义时，您将覆盖后续的 background-image 属性，因为它更具体。

如果您只是想在链接中添加一个下拉指示符，您可能需要考虑使用 :after 伪元素。

将以下 CSS 规则添加到您的 a.nav_selected:link 和 a.nav_selected:visited CSS：

position: relative;

然后添加新规则如下：

a.nav_selected:link:after,
a.nav_selected:visited:after {
    position: absolute;
    right: 2px;
    top: 7px;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    background:url(images/arrow.gif) no-repeat top center;
}

这是jsFiddle Demo

【讨论】：

感谢您的回答，但现在它显示箭头，如您的示例（黑色三角形）我的箭头是动画的，现在出现了。
你可以设置:after元素的背景来包含你的图片。
感谢您的回答，但我误解了如何正确执行此操作？
我用代码更新了我的问题它现在的样子。我遇到了同样的问题，只出现了渐变背景。
对不起，我刚刚更新了答案。我忘了提到你需要为:after 指定一个 with 和 height 才能正常工作。

【解决方案2】：

尝试更改此设置

background:url(images/arrow.gif) no-repeat top center;

to

background-image:url(images/arrow.gif) no-repeat top center;

【讨论】：

no-repeat top center 不能是background-image 属性的一部分