我正在尝试创建一个 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,所以我不能在没有控制适配器的情况下使用滑动门,这是我不想要的。
最佳答案
分离背景图像和背景颜色。像这样:
background-image: url(/images/edit_16.png);
background-color:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
对每个 css3 渐变语法执行此操作。
关于asp.net - 多个选择器中的多个背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7773963/