如何在多个背景图像声明中仅覆盖第二个图像？

Question

如何利用级联仅覆盖多个背景图像声明中的第二个图像？

我已经为lis 指定了一个标准样式,有两个背景图像(小猫和右侧的鱼).我还指定了一种样式li.secondary,我只想更改两个背景图像中的第二个:

li { 
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAYAAAA/xX6fAAAA/ElEQVR42q2WYQ3DIBSE5wAJk1AJSKiESpiESakEJCChEpAwCW/vJSw0LPQoHMn3A0q5R7leeIjIFNo2JSm+Zz5DSAy6oLan8lKiIjV5fGu8u+TnrkfIKftpUQGks3Au8qNE6yOx1Sb/xPJYyH3EURW4QsHGZ5NB3K0dDpDwDvEZysAZvvP4znVpwTVcmrAgLsLX/yXhP+xfrOyuza00sbFZ7p5TAGlyYMF/J4axNClOvKKVJnEmTa6gpgkSM0Ca8HdITxOiSwuzLjVoAUAUxIWQBXESMQTpSWQd4r0GuxiJsZPII0F6EnUZg5hES7dZWEkExPj3GiDCv9d8AVEGli2R88rKAAAAAElFTkSuQmCC) repeat-y 90% center,
  #CCC url("http://placekitten.com/275/300") repeat right center;
  margin: 1em;
  padding: 1em;
  color: #FFF;
  font-weight: bold;
 }

li.secondary {
  background: #CCC url("http://placekitten.com/325/300") repeat left 10%;
}

JSFiddle:http://jsfiddle.net/KatieK/9zcnp/1/

但新的声明background:吹出了第一张背景图片(鱼).如何仅在级联规则中处理第二个背景图像？

Answer 1

不幸的是,级联的工作方式使得无法重复单个背景层而不重复每个声明中的其余层.

通常,级联在每个声明的基础上工作,其中每个声明只包含一个属性和一个值:

/* Declaration */
property: value;

以逗号分隔的背景图层列表计算为级联目的的单个值,这就是为什么第二个background声明完全覆盖第一个声明的原因.¹

虽然background它是其他几个属性的简写,但它不是单个背景图层的简写,因为它们没有自己的属性.由于不存在单个图层属性,因此您无法使用级联仅覆盖某些图层,同时保留其余图层.²

这也是为什么分层背景中的前缀渐变是如此冗长和重复的原因.遗憾的是,对于我们来说,这是CSS语法的限制,因此单独使用CSS无法改进或解决它.

¹ _{这类似于简化声明的原因background: #ccc将删除先前使用background-image(示例1和2)声明的图像.}

² _{一个值得注意的例外是background-color,因为对于任何给定的盒子,只有一种背景颜色,它总是涂在该层图像下面的最底层.您可以background-color在规则中的任何位置一次设置为单个值,并且不会影响其他图层.}