无法将背景图像添加到CSS按钮

刚开始使用样式按钮时，我的愿望是在按钮左侧有一个背景，而文本搜索位于图像的右侧。这是我迄今为止的代码。 And here is how the button is so far 无法将背景图像添加到CSS按钮

如何在文本左侧添加小图标？我试着运行这段代码，但没有运气。

background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;

.button { 
 
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; 
 
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; 
 
    box-shadow:inset 0px 0px 0px 0px #ffffff; 
 
    background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); 
 
    background-color:#f9f9f9; 
 
    -webkit-border-top-left-radius:0px; 
 
    -moz-border-radius-topleft:0px; 
 
    border-top-left-radius:0px; 
 
    -webkit-border-top-right-radius:0px; 
 
    -moz-border-radius-topright:0px; 
 
    border-top-right-radius:0px; 
 
    -webkit-border-bottom-right-radius:0px; 
 
    -moz-border-radius-bottomright:0px; 
 
    border-bottom-right-radius:0px; 
 
    -webkit-border-bottom-left-radius:0px; 
 
    -moz-border-radius-bottomleft:0px; 
 
    border-bottom-left-radius:0px; 
 
    text-indent:76px; 
 
    border:1px solid #dcdcdc; 
 
    display:inline-block; 
 
    color:#666666; 
 
    font-family:Arial; 
 
    font-size:15px; 
 
    font-weight:bold; 
 
    font-style:normal; 
 
    height:66px; 
 
    line-height:66px; 
 
    width:152px; 
 
    text-decoration:none; 
 
    text-align:center; 
 
    text-shadow:1px 1px 0px #ffffff; 
 
} 
 
.button:hover { 
 
    background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%); 
 
    background-color:#e9e9e9; 
 
} 
 
.button:active { 
 
    position:relative; 
 
    top:1px; 
 
}

<div class="button">Search!</div>

来源

2016-04-25 Jonathan

我不明白这与Java编程有什么关系。你能说Javascript吗？如果是这样，请更改您的问题标签，因为您可能会吸引错误的专家来解决您的问题。 –

道歉，没看见我加了java大声笑 – Jonathan

ico？据我所知，你不能添加一个ico，浏览器不支持这种格式。如果你只是想添加一个图标，你可以使用引导程序的图标，简单而有效。 – wolfrevo

将您确切的代码示例代码输出的作品，所以有什么您将该行纳入您的css定义的方式有误。

不幸的是，你的示例代码不包括实际的行，但我的猜测是你可能已经把它放在线性渐变背景定义之上，然后它会覆盖你的图像。要测试这是否是错误，请将它放在.button声明的底部并查看它是否正在显示。

要使用多背景图片，您可以用逗号单独的个人价值，就像这样：

background-image: url('one.png'), url('two.jpg'); 
background-position: center center, left top;

来源

2016-04-25 19:50:09 TheThirdMan

谢谢。非常清楚！ – Jonathan

@Jonathan：很高兴能帮到你！另外，如果这个或任何答案已经解决了您的问题，请考虑通过点击复选标记来接受它。这向更广泛的社区表明，您已找到解决方案，并为答复者和您自己提供一些声誉 - 虽然没有义务这样做 – TheThirdMan

尽量给背景-size属性这样

.button { 
 
    -moz-box-shadow: inset 0px 0px 0px 0px #ffffff; 
 
    -webkit-box-shadow: inset 0px 0px 0px 0px #ffffff; 
 
    box-shadow: inset 0px 0px 0px 0px #ffffff; 
 
    background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); 
 
    background-color: #f9f9f9; 
 
    -webkit-border-top-left-radius: 0px; 
 
    -moz-border-radius-topleft: 0px; 
 
    border-top-left-radius: 0px; 
 
    -webkit-border-top-right-radius: 0px; 
 
    -moz-border-radius-topright: 0px; 
 
    border-top-right-radius: 0px; 
 
    -webkit-border-bottom-right-radius: 0px; 
 
    -moz-border-radius-bottomright: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    -webkit-border-bottom-left-radius: 0px; 
 
    -moz-border-radius-bottomleft: 0px; 
 
    border-bottom-left-radius: 0px; 
 
    text-indent: 76px; 
 
    border: 1px solid #dcdcdc; 
 
    display: inline-block; 
 
    color: #666666; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    font-style: normal; 
 
    height: 66px; 
 
    line-height: 66px; 
 
    width: 152px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 0px #ffffff; 
 
    background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0; 
 
    background-size: contain; 
 
}

<html> 
 

 
<body> 
 
    <div class="button">Search!</div> 
 
</body> 
 

 
</html>

来源

2016-04-25 19:37:01

我尝试了你的建议，但我没有运气 – Jonathan

我试过了，它适用于我，我用我的完整代码编辑了答案。 –

编辑*对不起，我输入它不正确，只是意识到比较两个代码，我的错误是。非常感谢你！ – Jonathan

尝试后背景线性渐变添加背景图片

来源

2016-04-25 19:51:54

要多背景为一个元素添加，你需要声明他们都在一个逗号分隔的列表，像这样：

.button { 
    background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0, linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); 
}

背景是从去年到第一，那么你的图标应该出现强制画很好。

如果多次声明一个属性，浏览器将真正覆盖之前的值，除非新值无效。另外，请记住，渐变被视为“图像”。

来源

2016-04-25 19:52:59 odnamrataizem

非常感谢您的帮助！ – Jonathan

无法将背景图像添加到CSS按钮

回答

相关问题