Что не так с моим кодом css3 для нескольких фоновых изображений? - PullRequest
Новая
       2

Что не так с моим кодом css3 для нескольких фоновых изображений?

0 голосов
/ 10 февраля 2012

Я попытался настроить пример на JSFiddle, но он почему-то показывает ошибку: http://jsfiddle.net/t3DDW/

В любом случае, вот мой css: 

body {
    background:
        url("images/bg.gif") repeat 0 0,
        url("images/bg-top.gif") repeat-x 0 0;
    color: #666;
    font: 62.5%/1.5em helvetica, arial, sans-serif;
}

Отображается только первое фоновое изображение. Я дважды проверил правильность обоих URL-адресов изображений. Есть ли причина, по которой второе фоновое изображение не отображается? Я тестировал его как на Chrome, так и на FF, а второе изображение bg не показывается.

1 Ответ

2 голосов
/ 10 февраля 2012

Как выглядят изображения?Порядок размещения важен.Первое будет помещено поверх остальных и т. Д.

Если первое изображение покрывает другое изображение, попробуйте изменить порядок изображений.

Из источника :

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

Пример из Порядок наложения нескольких фонов : 

background:
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */
...