Question

我想要实现的是在两个单独的CSS类中设置背景（使用CSS3的多个背景会很棒）。我希望用尽可能少的标记来实现这一目标。

示例：

CSS

.button {
    display: block;
}

.green {
    background-color: #87b400;
    background: -moz-linear-gradient(top,  #a4d400,  #739e00);
}

.icon {
    background-repeat: no-repeat;
}

.icon.add {
    background-image: url('../img/icons/add.png');
}

HTML

<a href="#" class="button green icon add">add item</a>
<input type="submit" name="example" value="add item" class="button green icon add" />
<button type="submit" class="button green icon add">add item</button>

我意识到我可以做那样的事情

<a href="#" class="button green"><span class="icon add">add item</span></a>

但我认为有更好的方法，我无法在input元素中使用它。

我也不想做这样的事情

.button.green.icon.add {
    background: -moz-linear-gradient(top,  #a4d400,  #739e00),
                url('../img/icons/add.png');
}

因为有5种颜色和11种图标，这将是一种恐怖。

Answer 1

DaiYoukai是对的，CSS3多图像背景 - 不能跨选择器使用。

解决方法：您可以使用CSS3内容功能 - 它实际上创建了其他元素。

<强> CSS

.icon{
    background-image: url('../img/icons/icon.png');
    width:16px;
    height:16px;   
}
.icon.add:after {/* new virtual layer */       
    background-image: url('../img/icons/icon_add.png');
    content: "";
    display: block;
    position: absolute;
    width:16px;
    height:16px;
}

注意：现代浏览器正确支持CSS3功能，IE除外：

CSS3多个背景 - 来自IE9。
CSS3内容 - 来自IE8。

Answer 2

据我了解，CSS3多个图像背景只能在同一个声明中使用。

http://www.w3.org/TR/css3-background/#layering

Answer 3

如果使用jQuery，则：

在某些情况下，使用$(".green, .icon.add").each(function () { var backgrounds = []; if ($(this).hasClass("green")) backgrounds.push("linear-gradient(#a4d400, #739e00)"); if ($(this).hasClass("icon") && $(this).hasClass("add")) backgrounds.push("url('../img/icons/add.png')"); $(this).css("background", backgrounds.join(", ")); });的解决方案可能会产生一些不需要的副作用，而您只能使用其中之一。有了这个，您可以拥有无限数量的背景。

CSS3跨选择器的多个背景

3 个答案: