8

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

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

4

3 回答 3

7

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

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

/* Declaration */
property: value;

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

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

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

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

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

于 2013-02-07T10:47:56.000 回答
1

我用 :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;  
}
于 2013-03-21T13:52:27.630 回答
-1

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

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

于 2013-02-06T22:56:37.890 回答