asp.net - 多个选择器中的多个背景

Question

我正在尝试创建一个 CSS3 按钮，其中包含一个使用多个背景的图像。我想使用相同的基本样式(基于 Twitter 的 BootStrap CSS 框架)，但通过添加一个类来应用不同的图像。

我想要一个渐变作为基础，然后通过标记一个额外的类来添加图像。我可以通过在 Bootstrap 中扩展 btn css 类来为一个按钮执行此操作，如下所示:

.btn.btnEdit 
{
    padding-left: 25px;
    background-color: #e6e6e6;
    background-repeat: no-repeat, no-repeat;
    background-position: 5px center, center center;
    background-image: url(/images/edit_16.png), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: url(/images/edit_16.png), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
}
.btn.btnEdit:hover {
  background-position: 5px center, 0 -15px;
}

但理想情况下，我想删除样板 CSS 并再次指定额外的背景(只是 background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25% , #e6e6e6); 或类似的东西)。有没有一种方法可以通过级联指定额外的背景？

这是 ASP.NET，所以我不能在没有控制适配器的情况下使用滑动门，这是我不想要的。

Answer 1

分离背景图像和背景颜色。像这样:

background-image: url(/images/edit_16.png);
background-color:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);

对每个 css3 渐变语法执行此操作。