css3漸變和無冗餘代碼的透明背景圖片

Question

我的頁面上有一組按鈕，它們具有相同的漸變背景，並通過類「藍色」應用。編號喜歡爲每一個添加不同的背景圖像，將它們放在漸變的頂部，而無需使用漸變和背景圖像選項單獨編碼每個背景圖像。

Transparent Background Image with a Gradient 此問題顯示了漸變+圖像的方法，但要求每個按鈕都具有單獨應用的漸變。至少概念驗證。

任何方式來結合他們？

CSS：

 .blue { 
      background:#3c4658; 
      background:-moz-linear-gradient(top, #3c4658 0%, #1c222e 50%); 
      background:url('../img/stop.png') 0 0 no-repeat, 
      -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c4658), color-stop(50%,#1c222e)); 
      background:url('../img/stop.png') 0 0 no-repeat, 
      -webkit-linear-gradient(top, #3c4658 0%,#1c222e 50%); 
      background:-o-linear-gradient(top, #3c4658 0%,#1c222e 50%); 
      background:-ms-linear-gradient(top, #3c4658 0%,#1c222e 50%); 
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3C4658', endColorstr='#1C222E',GradientType=0); 
      background:linear-gradient(top, #3c4658 0%,#1c222e 50%); 
     } 
     a.jp-stop { 
      background-image:url("../img/stop.png"); 
      width:35px; 
      height:23px; 

     } 

Answer 1

您可以使用應用多種背景的加拉格爾的CSS2.1的方式，用僞元素：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

而且，這是一個非常不好的想法，使用像「藍色」的表象類名稱。如果將來你希望它變成紅色呢？更改標記？

Answer 2

理論上你應該能夠有，只是適用的背景圖像的每個按鈕的類。

如

.button1 { background-image: url(foo.png); } 

在HTML

然後

<button class="blue button1">my button</button>