Question

下面有例子：

.btn
{
 color:white;
 border:solid 1px navy;
 cursor:pointer;
 font-weight:bold;
 text-align:center;
 padding-left:26px;
 text-align:left;
 width:120px;
 height:25px;
 display:inline-block;
 background: -moz-linear-gradient(top,  #2c539e 0%, #2c539e 100%);
}
.btn:hover
{
 background: -moz-linear-gradient(top,  #dff2fc 0%, #d7effc 48%, #bde4fa 80%, #abddf8 100%);
 border:1px solid #3C7FB1;
 color:Black;
}

现在，如何放置图像，但每个按钮的图像不同？

<input type="button" value="Save" class="btn" /><br> <!-- there's need save.png -->
<input type="button" value="Cancel" class="btn" /> <!-- there's need cancel.png -->

我知道将渐变与图像结合起来就像下面的代码：

background: url(save.png) 5px center no-repeat, -moz-linear-gradient(top,  #2c539e 0%, #2c539e 100%);

但是，如何为每个按钮使用btn类和不同的图像？

编辑： 好吧，我的问题并不具体（我的不好）...... 在上面的示例中，使用btn类按钮是一些深蓝色渐变颜色，在悬停时它们是一些浅蓝色渐变颜色。但是，在我需要的任何按钮中，在左侧不同的图像，如图标。

+-----------+
| X Save    |
+-----------+

其中X是图像16x16。那个“图标”必须位于css的渐变背景前面。

编辑2： 或者只是忘记渐变背景并使用简单的颜色？： - /

Answer 1

您可以在输入中添加另一个类（带有您想要的图像）：

<input type="button" value="Save" class="btn save" />
<input type="button" value="Cancel" class="btn cancel" />

和css

.save {
  background-image: url(save img);
}

.cancel {
  background-image: url(cancel img);
}

Answer 2

不幸的是，就像@Paulie_D写的那样，这是不可能的。

所以，如果每个按钮需要不同的背景图像，结合渐变背景，每个按钮都需要自己的css。

＆＃13;

.btn
  {
    color:white;
    border:solid 1px navy;
    cursor:pointer;
    font-weight:bold;
    text-align:center;
    padding-left:26px;
    text-align:left;
    width:120px;
    height:25px;
    display:inline-block;
    margin-bottom:5px;
  }
  .btn:hover
  {
    border:1px solid #3C7FB1;
    color:Black;
  }
  .save
  {
    background: url(http://cdn.makeuseof.com/wp-content/uploads/2012/12/save.png?22f766) no-repeat 5px center/16px 16px, -moz-linear-gradient(top,  #2c539e 0%, #2c539e 100%);
  }
  .save:hover
  {
    background: url(http://cdn.makeuseof.com/wp-content/uploads/2012/12/save.png?22f766) no-repeat 5px center/16px 16px, -moz-linear-gradient(top,  #dff2fc 0%, #d7effc 48%, #bde4fa 80%, #abddf8 100%);
  }
  .cancel
  {
    background: url(http://www.clker.com/cliparts/e/5/c/c/13695034571623408465ip_icon_02_cancel-md.png) no-repeat 5px center/16px 16px, -moz-linear-gradient(top,  #2c539e 0%, #2c539e 100%);
  }
  .cancel:hover
  {
    background: url(http://www.clker.com/cliparts/e/5/c/c/13695034571623408465ip_icon_02_cancel-md.png) no-repeat 5px center/16px 16px, -moz-linear-gradient(top,  #dff2fc 0%, #d7effc 48%, #bde4fa 80%, #abddf8 100%);
  }

＆＃13;

<input type="button" class="save btn" value="Save" /><br>
<input type="button" class="cancel btn" value="Cancel" />

＆＃13;

在按钮中使用CSS渐变与背景图像

2 个答案: