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

【问题标题】：How can I override only the second image in a multiple background image declaration?如何仅覆盖多背景图像声明中的第二个图像？
【发布时间】：2013-05-12 12:55:35
【问题描述】：

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

我为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: 的新声明吹掉了第一个背景图像（鱼）。如何仅处理级联规则中的第二个背景图像？

【问题讨论】：

在 .secondary 中包含鱼？？
是的，我不得不重新指定 .secondary 中的鱼。但我认为我应该能够使用 CSS 的 cascade 部分。 ;)

标签： css background-image

【解决方案1】：

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

一般来说，cascade 在每个声明的基础上工作，其中每个 declaration 只包含一个属性和一个值：

/* Declaration */
property: value;

出于级联的目的，以逗号分隔的背景层列表算作单个值，这就是为什么您的第二个 background 声明完全覆盖第一个。¹

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

这也是为什么分层背景中的前缀渐变如此冗长和重复的原因。遗憾的是，这是 CSS 语法的一个限制，因此仅使用 CSS 无法改进或解决它。

¹_{这类似于为什么像background: #ccc 这样的速记声明会删除之前使用background-image 声明的图像（例如1 和2）。}

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

【讨论】：

【解决方案2】：

我用 :before 伪元素解决了这个问题。

http://codepen.io/lajlev/pen/DAyhn

.tile {
  position:relative;
  display: block;
  float: left;
  width: 100px; 
  height: 100px;
  margin: 30px;
  background: url('http://www.schaik.com/pngsuite/tbbn3p08.png') no-repeat;

  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: -1;
  }
}

.tile.last:before {
  background-color: green;  
}

【讨论】：

【解决方案3】：

显然没有这样的事情，使用background-image属性设置多个背景，该属性没有background-image-1等后代。

但是，您可以使用一些 Javascript 覆盖它

【讨论】：