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>