CSS3支持多个背景图像,例如:CSS - 继承分层背景图像
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); }