image - 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 这样的预处理器。

现在您实际上只需重新陈述第一张图片和第二张图片。