css - 在按钮中使用带有背景图像的 CSS 渐变

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