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

我正在用CSS创建自定义渐变按钮。单击按钮时，它应该显示为小arrow.gif。以前我使用background color:property时，它就起作用了。现在我使用：

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:urlmages/arrow.gif不重复上止点；在背景图像后的代码底部：。。。然后出现箭头，但这里没有渐变背景。如何使它出现，箭头和背景？多谢各位

更新

现在，我的代码如下所示：

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

---

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

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

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

将以下CSS规则添加到a.nav_selected:链接和a.nav_selected:已访问的CSS中：

然后添加一个新规则，如下所示：

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

这里有一个

尝试更改此选项

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

to

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

---

覆盖背景：urlmages/arrow.gif不重复上止点；对于背景图像，没有跨浏览器的方法来使用多个背景图像。浏览器将渐变视为背景图像。谢谢您的回答，所以没有办法做到这一点？@Rimantėbartiejūtė请查看我的答案和相关的JSFIDLE。谢谢您的回答，但现在它显示箭头，如您的示例黑色三角形中所示。我的箭头已设置动画，现在显示。您可以设置：after元素的背景以包括您的图像。谢谢您的回答，但我误解了如何正确执行此操作？我用代码更新了我的问题，使其看起来像现在一样。我遇到了同样的问题，只显示渐变背景。对不起，我刚刚更新了答案。我忘了提到，您需要为：after指定带和高度才能正常工作。无重复上止点不能是背景图像属性的一部分

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

to

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