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

Question

刚开始设计按钮样式，我希望按钮左侧有背景，而文本搜索位于图像右侧。这是我到目前为止的代码。 And here is how the button is so far

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

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>

Answer 1

尝试像这样设置背景大小属性

.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>

Answer 2

将您的确切代码添加到示例代码输出中是可行的，因此您将行合并到 css 定义中的方式有问题。

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

要使用多个背景图片，您可以用逗号分隔各个值，如下所示：

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

Answer 3

尝试在背景线性渐变之后添加你的背景图片

Answer 4

要向一个元素添加多个背景，您需要在逗号分隔的列表中声明它们，如下所示：

.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%);
}

背景是从最后到第一绘制的，所以您的图标应该显示得很好。

如果多次声明一个属性，浏览器真的会覆盖掉之前的值，除非新的无效。另外，请记住渐变被认为是 "images".

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

Cant add background image to CSS button

css

button

styling