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

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

我已经指定了一个标准样式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/ http://jsfiddle.net/KatieK/9zcnp/1/

但新的声明background:吹掉第一个背景图像（鱼）。如何仅处理级联规则中的第二个背景图像？

不幸的是，级联的工作方式使得不可能在不重复每个声明中的其余层的情况下覆盖各个背景层。

一般来说，cascade http://www.w3.org/TR/CSS21/cascade.html#cascade在每个声明的基础上工作，其中每个宣言 http://www.w3.org/TR/CSS21/syndata.html#declaration仅由一个属性和一个值组成：

/* Declaration */
property: value;

A comma-separated list of background layers counts as a single value for the purposes of the cascade, which is why your second background declaration completely overrides the first.¹

While background is a shorthand for several other properties, it is not a shorthand for individual background layers, as they do not have their own properties. Since individual layer properties don't exist, you cannot use the cascade to override only certain layers while keeping the rest.²

这也是分层背景中的前缀渐变如此冗长和重复的原因。对我们来说不幸的是，这是 CSS 语法的限制，因此单独使用 CSS 无法做太多改进或解决它。

¹ _{This is similar to why a shorthand declaration like background: #ccc will delete an image that was previously declared using background-image (examples 1 https://stackoverflow.com/questions/8686656/does-this-shorthand-for-background-removes-the-other-attributes/8686661#8686661 and 2 https://stackoverflow.com/questions/10455465/why-cant-i-seem-to-use-background-clip/10455580#10455580).}

² _{A notable exception to this is background-color, because for any given box there is only one background color, which is always painted in the bottommost layer beneath the image in that layer. You can set background-color to a single value at a time anywhere in a rule, and it will not affect other layers.}