CSS - 继承层次的背景图片 [英] CSS - Inheriting layered background images

问题描述

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

  {foo的背景图像：网址（/i/image1.jpg），网址（/i/image2.jpg）; }
 

我希望能够辅助图像添加到一个元素与类虽然。

因此​​，例如，假设你有一个导航菜单。而且每个项目都有一个背景图像。当一个导航项目中选择要叠加在其他背景图片。

我不明白的方式来添加，而不是重新声明的整个背景属性的背景图像。这是一种痛苦，因为为了多的背景要做到这一点，你将不得不一遍又一遍地写基地BG图像的每个项目，如果项目具有独特的图像。

在理想情况下我可以做这样的事情：

 李{背景：网址（baseImage.jpg）; }
li.selected {背景：网址（selectedIndicator.jpg）; }
 

和已li.selected的最终结果会出现相同的，如果我所做的：

  li.selected {背景：网址（baseImage.jpg），网址（selectedIndicator.jpg）; }
 

更新：我也试过，没有运气（我相信背景不能被继承。）以下

 李{背景：网址（baseImage.jpg），无; }
li.selected {背景：继承，URL（selectedIndicator.jpg）; }
 

解决方案

这是在任何情况下，没有办法的办法CSS继承工作。 继承意味着一个元素应该在它的属性是父元素，不影响相同的元素previous声明。

您想要什么已被提议作为一种方法，使CSS更面向对象的，但你会得到最接近的是一个pre处理器一样SASS。

现在你实际上只需要与第二沿重状态下的第一形象。

CSS3 supports multiple background images, for example:

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

I'd like to be able to add a secondary image to an element with a class though.

So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.

I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.

Ideally I'd be able to do something like this:

li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }

And have li.selected's end result appear the same if I did:

li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }

Update: I also tried the following with no luck (I believe backgrounds are not inherited..)

li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }

解决方案

That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.

What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.

For now you actually just have to re-state the first image along with the second.

这篇关于CSS - 继承层次的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！