CSS - 继承分层背景图像

Posted 2023-03-06

【中文标题】CSS - 继承分层背景图像

【英文标题】：CSS - Inheriting layered background images

【发布时间】：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); 

【参考方案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' ); 

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