Question

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

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

Answer 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

Answer 2

尝试更改此

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

to

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

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

2 个答案: