CSS3 несколько фонов?
Согласно QuirksMode, определение нескольких фонов работает (по крайней мере) в IE9, Chrome и Firefox 3.6.
У меня есть следующий CSS:
background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
Это довольно сложный фон, но он должен создать эффект фона "Темный мир" для моей онлайн-игры. По сути, это три разных "наземных" слоя, градиентное небо, два "края", которые как бы затухают над краями экрана, и молния. Старые браузеры должны видеть только градиентный фон "темного неба".
Результирующий эффект должен быть: Скриншот.
Теперь перейдем к проблеме: IE9 отлично отображает этот эффект и может даже использовать дополнительный эффект "анимированный фон", когда слои земли прокручиваются в режиме параллакса, а молния мигает и искажается при преобразованиях CSS. Firefox 6 и Chrome 13, однако, отображают только резервный фон только для градиента.
У кого-нибудь есть идеи, почему это происходит?
2 ответа
Чтобы ответить на мой собственный вопрос, ни Chrome, ни Firefox не поддерживают более двух значений в background-position, Заставляет меня задуматься, как бы они разместили фоновое изображение относительно правого нижнего угла...
Оригинальный ответ довольно старый, поэтому я решил добавить решение для всех, кто заходит на эту страницу. Вы можете установить несколько положений фона, как вы можете установить несколько фонов.
Хотя я не уверен, была ли поддержка, когда вопрос был задан впервые.
Похоже, что поддержка сейчас довольно стабильна. http://caniuse.com/
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
Вы разделяете фоновые позиции запятой, в порядке их определения в background-image