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

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

我为

li

s指定了一个标准样式，带有两个背景图像（小猫和右侧的鱼）。我还为

li.secondary

指定了一种样式，其中我只想更改两个背景图像中的第二个：

li{
背景：url数据：数据：图像/png；Bas64，IVBoWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA级/电子级级级级级级级级/电子VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWQBXESMQTPSWQD4R0GUXIJSZPII0F6ENUZG5HES7DZWEKEXPJ3GIDCV9D8AVEGLI2R88RKAAAAELFTKSUQMCC）重复90%中心，
#CCC url（“http://placekitten.com/275/300）重复右中；
边缘：1米；
填充：1em；
颜色：#FFF；
字体大小：粗体；
}
中学{
背景：#CCC url（“http://placekitten.com/325/300）左重复10%；
}

JSFiddle：

---

但是

background:

的新声明破坏了第一个背景图像（鱼）。如何在级联规则中只处理第二个背景图像？

显然没有这样的事情，使用

背景图像

属性设置多个背景，该属性没有像

背景图像-1

这样的子体

---

但是，您可以使用一些Javascript覆盖它，不幸的是，级联的工作方式使得不重复每个声明中的其余层就无法覆盖单个背景层

一般而言，工程以每次申报为基础，其中每个申报仅包含一个财产和一个价值：

/*声明*/
财产：价值；

出于级联的目的，背景层的逗号分隔列表作为单个值计算，这就是为什么第二个

background

声明完全覆盖第一个。1

虽然

background

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

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

---

1这类似于为什么像

background:#ccc

这样的速记声明会删除以前使用

background image

声明的图像（示例和）

---

2一个值得注意的例外是背景色，因为对于任何给定的框，只有一种背景色，它总是绘制在该层图像下方的最底层。您可以在规则中的任何位置将背景色设置为一个单一值，并且不会影响其他层。

I solv使用：before伪元素对其进行加密

---

在.secondary中包含鱼？？是的，我不得不在

.secondary

中重新指定鱼。但是我想我应该能够使用CSS的级联部分

.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;  
}