css3渐变和透明背景图像，无需冗余代码

问题描述

| 我的页面上有一组具有相同渐变背景的按钮，通过类“ blue。\”应用。id喜欢为每个按钮添加不同的背景图像，将它们放在渐变顶部，而不必使用渐变和背景图片选项分别对每个图片进行编码。 具有渐变的透明背景图像 这个问题展示了一种渐变+图像的方法，但是要求每个按钮都单独应用渐变。至少是概念证明。 有什么办法结合起来吗？ 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,#1c222e 50%);
            background:-o-linear-gradient(top,#1c222e 50%);
            background:-ms-linear-gradient(top,#1c222e 50%);
            filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#3C4658\',endColorstr=\'#1C222E\',GradientType=0 );
            background:linear-gradient(top,#1c222e 50%);
       }
       a.jp-stop {
            background-image:url(\"../img/stop.png\");
            width:35px;
            height:23px;

       }

    

解决方法

        您可以使用Gallagher的CSS2.1方法来应用带有假元素的多个背景：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ 另外，使用像“ blue”这样的表示性类名称也是一个非常糟糕的主意。如果将来您希望它变成红色怎么办？更改标记？     ,        从理论上讲，您应该能够为每个仅应用背景图像的按钮创建一个类。 例如

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

然后用HTML

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