CSS - 继承分层背景图像

时间:2010-04-01 23:20:51

标签: css image background css3

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

3 个答案:

答案 0 :(得分:4)

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

你想要的是一种使CSS更加面向对象的方法,但你最接近的就是使用像SASS这样的预处理器。

现在你实际上只需要重新说明第一张图像和第二张图像。

答案 1 :(得分:3)

我认为这不可行,我认为你每次都必须重新定义整个规则。

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

答案 2 :(得分:0)

据我所知,仍然无法添加CSS规则。

您可以尝试将第二个图像应用于::after伪元素:

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