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渐变语法执行此操作。

多选择器中的多个背景

1 个答案: