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

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

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