Поддержка 3 фоновых изображений в CSS?

Question

Я хочу иметь 3 фоновых изображения для div. Я знаю, что CSS2 и CSS3 могут обрабатывать 2 изображения, но могут ли они обрабатывать 3?

Фоновое изображение чисто из косметических соображений, поэтому, если оно работает не во всех браузерах, это может быть нормально. Должен ли я использовать CSS2 или CSS3 для этого и насколько широко они поддерживаются?

Спасибо

Answer 1

С CSS3 вы можете иметь столько, сколько хотите, я считаю. Вы просто связываете их запятой:

http://www.css3.info/preview/multiple-backgrounds/

Answer 2

CSS2 не может этого сделать, но вы можете поместить 3 элемента div внутри контейнера, каждый с разным фоновым изображением:

.box { width:100%; height:100%; position:absolute; top:0px; right:0px }
.bg1 { background-image: url( <..image 1 url> ); }
.bg2 { background-image: url( <..image 1 url> ); }
.bg3 { background-image: url( <..image 1 url> ); }
.container { width:400px; height: 400px; position:relative; }

HTML

...
<div class="container">
    <div class="box bg1"> </div>
    <div class="box bg2"> </div>
    <div class="box bg3"> </div>
</div>

Таким образом, вы можете управлять отображением, в каком порядке, используя атрибут z-index.

Вы можете использовать четвертый div для размещения своего контента, отделяя фоны от контента

Надеюсь, это поможет

Answer 3

Несколько фонов на одном элементе доступны только в CSS3 и, таким образом, поддерживаются только браузерами класса A, такими как Chrome, Safari и последние версии Firefox.

Альтернативное решение, которое поддерживается CSS2 и должно (теоретически) работать в IE8 (возможно, 7), - это: before и: after псевдоклассы. Это помогает поддерживать чистоту разметки (не нужно добавлять несколько элементов div внутри элемента контейнера) и обеспечивает более широкий диапазон совместимости с браузером.

http://www.quirksmode.org/css/beforeafter.html

Answer 4

Если вы хотите быстро сослаться на то, что может сделать CSS 2 или 3 и какие браузеры поддерживают поперти, то этот веб-сайт великолепен http://www.findmebyip.com/litmus/#target-selector

Единственный другой способ, как и выше, на данный момент - абсолютные позиционные элементы div с примененными к ним фоновыми изображениями. Я использовал этот метод на работе для совместимости IE6.

Answer 5

в CSS2 нет поддержки нескольких фонов (даже не 2?), Насколько я знаю, поддержка CSS3 будет только в более современных браузерах, которые на этот раз не включают IE8

обычнометод применения двух изображений - использовать дополнительный div-обертку, поместить одно изображение в качестве фона на внешний div, а другое - на сам элемент или другой div-обертку, предположим, что это будет работать и для 3, но если это слишком много оберток, как насчет2 для всех браузеров и третий для современных в качестве запасного варианта, третий и другие могут быть применены в качестве фона на любой из вышеупомянутых оболочек / элементов