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

然而,第二项声明推翻了第一项。是否只有安保部能够这样做?

Answer 1

你的遴选人是罚款的,但你的错误在第一次宣言中是:

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

你们需要使用短程<条码>背后<>条码>,而不是<条码>背后地-image<>条码”,因为你正在对其他价值以及图像加以说明。您的第二项规则似乎凌驾于第一位,其原因是第一项规则无效,因此实际上完全忽视了。

你(作为Groovetrain 说)必须加上另一项规则,将这两条结合起来,但我 have先拖了多个背景,所以我可以说,一个人如何战胜另一个背景。

Answer 2

You may have to include an additional rule to account for the name class being applied. Like this:

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

友情链接