CSS3跨选择器的多个背景

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.