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

我不认为这是可能的，我thi你必须每次重新定义整个规则。

例如，您可以在具有初始背景的每个项目周围添加一个“包装器”，实际项目具有透明背景。然后在选择它时在项目本身上添加背景。

Answer 2

也就是说，无论如何，不​​是CSS继承的工作方式。 inherit意味着一个元素应该承担它的父元素的属性，而不是影响相同元素的先前声明。

为了使CSS更加面向对象，已经提出了你想要的东西，但最接近你将得到的是像SASS这样的预处理器。

现在，您实际上只需重新声明第一张图像和第二张图像。