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 Content - она ​​фактически создает дополнительный элемент.

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