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

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); }

Ответ 1

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

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

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

Ответ 2

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

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