Применить несколько CSS3 Background-Image из нескольких операторов - PullRequest
Новая
       9

Применить несколько CSS3 Background-Image из нескольких операторов

3 голосов
/ 08 марта 2011

Я хочу использовать несколько фоновых изображений 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?

Ответы [ 2 ]

3 голосов
/ 09 марта 2011

С вашими селекторами все в порядке, но ваша ошибка в первом объявлении: 

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

Вам нужно использовать сокращенное свойство background вместо background-image, потому что вы указываете кучу другихзначения вместе с изображениями.Причина, по которой кажется, что ваше второе правило переопределяет первое, заключается в том, что первое правило недопустимо и поэтому фактически игнорируется.

Вы можете (как Groovetrain говорит ) добавить другоеПравило объединять два, хотя, я не возился с несколькими фонами в последнее время, поэтому я не могу точно сказать, как один переопределяет / интегрирует с другим.

0 голосов
/ 08 марта 2011

Возможно, вам придется включить дополнительное правило, чтобы учесть применяемый класс 'name'.Как это: 

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