如何只覆盖多个背景图片声明中的第二个图片？ [英] How can I override only the second image in a multiple background image declaration?

问题描述

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

我已指定 li s，有两个背景图片（小猫，而鱼在右侧）。我还指定了 li.secondary 的样式，其中我只想更改两个背景图片中的第二个：

<预类=郎CSS prettyprint-覆盖> 李{
背景：网址（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAYAAAA / xX6fAAAA / ElEQVR42q2WYQ3DIBSE5wAJk1AJSKiESpiESakEJCChEpAwCW / vJSw0LPQoHMn3A0q5R7leeIjIFNo2JSm + Zz5DSAy6oLan8lKiIjV5fGu8u + TnrkfIKftpUQGks3Au8qNE6yOx1Sb / xPJYyH3EURW4QsHGZ5NB3K0dDpDwDvEZysAZvvP4znVpwTVcmrAgLsLX / yXhP + xfrOyuza00sbFZ7p5TAGlyYMF / J4axNClOvKKVJnEmTa6gpgkSM0Ca8HdITxOiSwuzLjVoAUAUxIWQBXESMQTpSWQd4r0GuxiJsZPII0F6EnUZg5hES7dZWEkExPj3GiDCv9d8AVEGli2R88rKAAAAAElFTkSuQmCC）重复-Y 90％中心，
#CCC URL（http://placekitten.com/275/300）重复右心;
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：吹出第一个背景图像（鱼）。

解决方案

不幸的是，级联的工作方式使得不可能重写单个背景图层，而不重复每个声明中的其余图层。

一般来说，层叠按每个声明执行，其中每个声明只包含一个属性和一个值：

  / 
 property：value; 
  

以逗号分隔的背景图层列表为级联目的计为一个值是为什么你的第二个背景声明完全覆盖第一个。 ¹

c $ c> background 是其他几个属性的缩写，它不是单个背景图层的缩写，因为它们没有自己的属性。因为单独的图层属性不存在，所以不能使用级联来覆盖某些图层，而保留其余图层。 ²

为什么在分层背景中的前缀梯度是如此冗长和重复。遗憾的是，对于我们来说，这是CSS语法的限制，所以使用CSS单独改进或解决它的方法不多。

---

¹ _{这类似于为什么像 background：#ccc 这样的简写声明会删除先前声明的图像使用 background-image （示例 1 和 2 ）。}

² _{一个值得注意的例外是 background-color ，因为对于任何给定的框，只有一个背景颜色，它总是绘制在该图层中图像下面的最底层。您可以在规则中的任意位置将 background-color 设置为单个值，而不会影响其他图层。}

How can I utilize the cascade to override only the second image in a multiple background image declaration?

I have specified a standard style for lis, with two background images (the kitten, and the fish on the right side). I've also specified a style for li.secondary where I want to change only the second of the two background images:

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/

But the new declaration for background: blows out the first background image (the fish). How can I address only the second background image in a cascading rule?

解决方案

Unfortunately, the way the cascade works makes it impossible to override individual background layers without repeating the rest of the layers in each declaration.

In general, the cascade works on a per-declaration basis, where each declaration consists of exactly one property and one value:

/* 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.²

This is also why prefixed gradients in layered backgrounds are so verbose and repetitive. Sadly for us, this is a limitation of the CSS syntax, so not much can be done to improve or work around it using CSS alone.

---

¹ _{This is similar to why a shorthand declaration like background: #ccc will delete an image that was previously declared using background-image (examples 1 and 2).}

² _{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.}

这篇关于如何只覆盖多个背景图片声明中的第二个图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！