小编woj*_*iku的帖子

我想要实现的是在两个单独的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个图标,这将是一个恐怖.