Multiple Backgrounds wielokrotne tło

Multiple Backgrounds

CSS3 Wiele elementów tła dla jednego elementu pola.To nowa nie bywała możliwośc css trzeciej generacji.

Przeglądarki które obsługuja takie rozwiązania to :Mozilla Firefox (3.6 +), Safari / Chrome (1.0/1.3 +), Opera (10.5 +), a nawet Internet Explorer (9.0 +)

To okno posiada dwa tła obrazów, pierwszy z owcy (wyrównany do dołu i centrum), a drugi na tle trawy i przestrzeni powietrznej (wyrównany do lewego górnego rogu).

Oto kod :

#przykład_1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

Jak to działa?

Wiele obrazów tła można określić przy użyciu zarówno indywidualnych właściwości tła lub background własności skróconą. Zaczniemy od spojrzenia  na przykład za pomocą indywidualnych właściwości tła.

Określanie wielu środowisk za pomocą indywidualnych właściwości tła  składnia:

background-image: <bg-image> [ , <bg-image> ]*

<bg-image> = <image> | none

Uwaga: wartość 'none' nadal generuje warstwę.

Przykład:

background-image: url(sheep.png), url(betweengrassandsky.png);

Określanie wielu środowisk za pomocą 'background' własność skróconą (‘background’ shorthand property)

Mówiąc w uproszczeniu wartości skrócone tła:

składnia:

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

Przykład:

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

Oto kilka przykładów, które powinny działać we wszystkich przeglądarkach wyszczególnionych powyżej

Przykład 1 .

#exA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

Lub inaczej ten sam obrazek

#ex2A {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Przykład 2

#exampleB {
display: inline-block;
margin: 1em; padding: 1em;
background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
}

lub inaczej ten sam efekt

#exampleB {
width: 500px;
height: 250px;
background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x;
}

Pełna specyfikacja tej techniki wielu obrazów w jednym"tle" dostępna na W3C pod tym adresem LINK