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;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试提供像这样的背景大小属性

＆＃13;

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

＆＃13;

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

＆＃13;

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

背景从上到下绘制，因此您的图标应该显示得很好。

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

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

4 个答案: