使用CSS梯度与按钮的背景图片

有下面的例子：使用CSS梯度与按钮的背景图片

.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： 或者只是为了忘记渐变背景和使用简单的颜色？： -/

来源

2014-11-21 nelek

你可以使用你知道的比一个类。 – 2014-11-21 20:31:10

我不明白...为每个按钮创建类？你可以发布一些例子，请... thx – nelek 2014-11-21 20:33:30

如果你想每个按钮看起来不同，那么是的。 – 2014-11-21 20:51:34

不幸的是，像@Paulie_D写道，这是不是可能。

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

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

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

来源

2015-08-08 07:58:28 nelek

您可以在输入添加另一个类（像你想）：

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

来源

2014-11-21 20:34:02

这不适用于'btn'类的'渐变背景'...图像不会出现。 – nelek 2014-11-21 20:39:58

看看这里[codepen]（http://codepen.io/Chariz/pen/wBBRQB） – 2014-11-21 20:46:56

使用CSS梯度与按钮的背景图片

回答

相关问题