Question

我想使用多个CSS3背景图像，并且在两个不同的声明中这样做是有语义意义的：

#brands > ul > li:nth-child(odd) {
    background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center;
}

#brands .name {
    background:url(img/logo/name.jpg) no-repeat center;
}

但是第二个声明会覆盖第一个声明。有没有办法在CSS中解决这个问题？

Answer 1

您的选择器很好，但您的错误在第一个声明中：

background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center;

您需要使用简写background属性而不是background-image，因为您要指定一堆其他值以及图像。你的第二个规则似乎覆盖第一个规则的原因是因为第一个规则无效，因此实际上完全被忽略了。

你可能（因为Groovetrain says）必须添加另一个规则来组合这两个，但我最近并没有修改过多个背景，所以我不能肯定地说一个如何覆盖/整合另一个。

Answer 2

您可能需要添加一条附加规则来说明正在应用的“名称”类。像这样：

#brands > ul > li:nth-child(odd) {
  background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center;
}

#brands .name {
  background:url(img/logo/name.jpg) no-repeat center;
}

/* This one has all three bg images */
#brands > ul > li.name:nth-child(odd) {
  background: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center, url(img/logo/name.jpg) no-repeat center;
}

从多个语句中应用多个CSS3 Background-Image

2 个答案: