html - 跨选择器的 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。