使用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梯度與按鈕的背景圖片

回答

相關問題