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); }
2 ответа
Это, в любом случае, не так, как работает наследование CSS. inherit подразумевает, что элемент должен принимать атрибуты своего родительского элемента, а не предыдущие объявления, влияющие на тот же элемент.
То, что вы хотите, было предложено как способ сделать CSS более объектно-ориентированным, но ближе всего вы получите препроцессор, такой как SASS.
На данный момент вам просто нужно повторно сформулировать первое изображение вместе со вторым.
Я не думаю, что это возможно, я думаю, вам придется каждый раз заново определять правило.
Например, вы можете просто добавить «обертку» вокруг каждого элемента с начальным фоном, при этом сам элемент будет иметь прозрачный фон. Затем добавьте фон на сам элемент, когда он будет выбран.