CSS - Наследование многослойных фоновых изображений

Question

CSS3 поддерживает несколько фоновых изображений, например:

foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }

Я хотел бы иметь возможность добавить вторичное изображение для элемента с классом.

Так, например, скажем, у вас есть меню навигации. И у каждого предмета есть фоновое изображение. Когда выбран элемент навигации, вы хотите наложить на другое фоновое изображение.

Я не вижу способа «добавить» фоновое изображение вместо повторного выделения всего свойства фона. Это неприятно, потому что для того, чтобы сделать это с несколькими фонами, вам придется многократно писать базовое изображение bg для каждого элемента, если элементы имеют уникальные изображения.

В идеале я бы мог сделать что-то вроде этого:

li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }

И конечный результат li.selected выглядел бы так же, как и я:

li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }

Обновление: я тоже безуспешно попробовал следующее (полагаю, фоны не наследуются ..)

li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }

Answer 1

То есть, в любом случае, не так работает наследование CSS. inherit подразумевает, что элемент должен принимать атрибуты своего родительского элемента, а не предыдущие объявления, влияющие на тот же элемент.

То, что вы хотите, было предложено как способ сделать CSS более объектно-ориентированным, но ближе всего вы получите предварительный процессор, такой как SASS.

На данный момент вам просто нужно переустановить первое изображение вместе со вторым.

Answer 2

Я не думаю, что это возможно, я думаю, вам придется каждый раз переопределять целое правило.

Например, вы можете просто добавить «обертку» вокруг каждого элемента, у которого есть исходный фон, а у фактического элемента есть прозрачный фон. Затем добавьте фон к самому элементу, когда он выбран.