CSS - 继承分层背景图像答案

【问题标题】：CSS - Inheriting layered background imagesCSS - 继承分层背景图像
【发布时间】：2011-02-03 14:07:07
【问题描述】：

CSS3 支持多种背景图片，例如：

foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }

我希望能够为具有类的元素添加辅助图像。

例如，假设您有一个导航菜单。每个项目都有一个背景图像。选择导航项后，您希望在另一个背景图像上分层。

我没有看到“添加”背景图像而不是重新声明整个背景属性的方法。这很痛苦，因为为了在多背景下执行此操作，如果项目具有独特的图像，您必须一遍又一遍地为每个项目编写基础背景图像。

理想情况下，我可以这样做：

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

【问题讨论】：

标签： image background css

【解决方案1】：

也就是说，无论如何，这不是 CSS 继承的工作方式。 inherit 暗示一个元素应该具有其父元素的属性，而不是影响同一元素的先前声明。

你想要的已经被提议作为一种使 CSS 更加面向对象的方法，但你会得到最接近的方法是使用像 SASS 这样的预处理器。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

据我所知，附加 CSS 规则仍然是不可能的。

您可以尝试将第二张图片应用到::after 伪元素：

li { background: url(baseImage.jpg); position: relative; }
li.selected::after { 
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(selectedIndicator.jpg); 
}

【讨论】：

【解决方案4】：

我最近和你有同样的需要。终于想通了，用css变量解决了。

::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }

select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }

重置属性时，只需在列表中再次指定变量即可！

【讨论】：