Dvojité pozadí. Jak vytvořit více obrázků na pozadí CSS. Příklad kódu: více obrázků na pozadí

kvůli jeho pohodlí a všestrannosti, aby se odlišil od ostatních prvků, je k němu přidána třída bloku (příklad 1).

Příklad 1. Dva obrázky na pozadí

HTML5 CSS3 IE Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 3.

). Dnes si povíme něco málo o další zajímavé funkci – použití více obrázků na pozadí.

Složení pozadí

Existuje mnoho důvodů, proč obecně může být nutné poskládat několik obrázků na pozadí, z nichž nejdůležitější jsou:

• úspora provozu na velikosti obrázků, pokud jednotlivé obrázky dohromady váží méně než obrázek se zploštělými vrstvami a
• nutnost nezávislého chování jednotlivých vrstev např. při implementaci paralaxových efektů.

Mohou existovat i jiné rozumné důvody :)

Klasický přístup

Potřebujeme tedy umístit několik obrázků na pozadí nad sebe. Jak se tento úkol obvykle řeší? Je to velmi jednoduché: pro každý obrázek na pozadí se vytvoří blok a k němu se přiřadí odpovídající obrázek na pozadí. Bloky jsou buď vnořeny do sebe, nebo umístěny v řadě s příslušnými pravidly umístění. Zde je jednoduchý příklad:

Blok s třídou "rybaření" uvnitř "mořské panny" pouze pro demonstrační účely.

Nyní několik stylů:
.sample1 .more, .sample1 .mermaid, .sample1 .fishing (výška: 300px; šířka: 480px; pozice: relativní;) .sample1 .sea (pozadí: url (media / sea.png) repeat-x vlevo nahoře;) .sample1 .mermaid (pozadí: url (media / mořská panna.svg) repeat-x vlevo dole;) .sample1 .fish (pozadí: url (media / fish.svg) no-repeat; výška: 70px; šířka: 100px; vlevo : 30px; nahoře: 90px; pozice: absolutní;) .sample1 .fishing (pozadí: url (media / fishing.svg) bez opakování vpravo nahoře 10px;)

Výsledek:

V tomto příkladu jsou tři vnořená pozadí a jeden blok s rybami, umístěný vedle bloků "pozadí". Teoreticky lze rybu přesouvat například pomocí JavaScriptu nebo CSS3 Transitions / Animations.

Mimochodem, tento příklad používá novou syntaxi umístění na pozadí pro „.fishing“, také definovanou v CSS3:
pozadí: url (media / fishing.svg) bez opakování vpravo nahoře 10px;
V současné době je podporován v IE9 + a Opera 11+, ale není podporován ve Firefoxu 10 a Chrome 16. Uživatelé posledních dvou prohlížečů tedy zatím nebudou moci chytit ryby.

Více pozadí

Na pomoc přichází nová funkce přidaná do CSS3 – možnost definovat více obrázků na pozadí pro jeden prvek najednou. Vypadá to takto:

A odpovídající styly:
.sample2 .sea (výška: 300px; šířka: 480px; pozice: relativní; obrázek na pozadí: url ("media / fishing.svg"), url ("media / mořská panna.svg"), url ("media / sea. png "); background-position: vpravo nahoře 10px, vlevo dole, vlevo nahoře; background-repeat: no-repeat, repeat-x, repeat-x;) .sample2 .fish (background: url (" media / fish.svg ") bez opakování; výška: 70px; šířka: 100px; vlevo: 30px; nahoře: 90px; pozice: absolutní;)
Chcete-li definovat více obrázků, musíte použít pravidlo obrázku na pozadí, které uvádí jednotlivé obrázky oddělené čárkami. Další pravidla, také seznam, lze použít k nastavení umístění, opakování a dalších parametrů pro každý z obrázků. Věnujte pozornost pořadí, ve kterém jsou obrázky uvedeny: vrstvy jsou uvedeny zleva doprava od nejvyšší k nejnižší.

Výsledek je úplně stejný:

Jedno pravidlo

Pokud ryby nemusí být vybrány v samostatném bloku pro následné manipulace, lze celý obrázek přepsat jedním jednoduchým pravidlem:

Styly:
.sample3 .sea (výška: 300px; šířka: 480px; pozice: relativní; obrázek na pozadí: url ("media / fishing.svg"), url ("media / mořská panna.svg"), url ("media / fish. svg "), url (" media / sea.png "); poloha na pozadí: vpravo nahoře 10 pixelů, vlevo dole, 30 pixelů 90 pixelů, vlevo nahoře; opakování pozadí: neopakovat, opakovat-x;)

Obrázek s výsledkem nedám - věřte mi, shoduje se s dvěma obrázky výše. Dejte si ale opět pozor na styly, zejména na "background-repeat" - podle specifikace, pokud část seznamu na konci chybí, pak prohlížeč musí zadaný seznam opakovat tolikrát, kolikrát je potřeba, aby číslo odpovídalo obrázků v seznamu.

V tomto případě je ekvivalentní tomuto popisu:
background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;

Ještě kratší

Pokud si pamatujete CSS 2.1, definuje schopnost popsat obrázky na pozadí stručným způsobem. Co takhle více obrázků? Je také možné:

Sample4 .sea (výška: 300px; šířka: 480px; pozice: relativní; pozadí: url ("media / fishing.svg") vpravo nahoře 10px bez opakování, url ("media / mořská panna.svg") vlevo dole repeat-x , url ("media / fish.svg") 30px 90px bez opakování, url ("media / sea.png") repeat-x;)

Všimněte si však, že nyní nemůžete jen přeskočit hodnoty (pokud se neshodují s výchozím nastavením). Mimochodem, pokud chcete nastavit barvu obrázku na pozadí, musíte to udělat v úplně poslední vrstvě.

Dynamické obrázky

Pokud je kompozice statická nebo dynamická pouze v závislosti na velikosti kontejneru, pak vícenásobné pozadí zjevně zjednodušuje design stránky. Co když ale potřebujete pracovat s jednotlivými prvky kompozice nezávisle na javascriptu (přesunout, posouvat atd.)?

Mimochodem, zde je příklad ze skutečného života - téma s pampeliškou v Yandexu:


Pokud se ponoříte do kódu, uvidíte něco takového:

...

Bloky s třídami "b-fluff-bg", "b-fluff__cloud" a "b-fluff__item" obsahují obrázky na pozadí, které se navzájem překrývají. Navíc pozadí s mraky neustále roluje a po obrazovce létají pampelišky.

Dá se to přepsat pomocí více pozadí? V zásadě ano, ale za předpokladu 1) podpory této funkce v cílových prohlížečích a ... 2) čtěte dále;)

Jak přidám reproduktory na více pozadí? V takové situaci se ukazuje jako vhodné, že v interním pohledu prohlížeč rozhází jednotlivé parametry obrázku na pozadí podle příslušných pravidel. Například pro polohování existuje „poloha na pozadí“ a pro offsety ji stačí změnit. Použití více obrázků je však zpoplatněno – toto pravidlo (a jakékoli podobné pravidlo) musí uvádět polohu pro všechna pozadí nastavená pro váš blok, a to nemůžete dělat selektivně.

Chcete-li přidat animaci do našeho pozadí s rybami, můžete použít následující kód:
$ (document) .ready (function () (var sea = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mořská pannaX = 0; var t = 0; funkce animationLoop () (rybyY = 90 + Math.floor (30 * Math.sin (t ++ / 180,0)); if (- rybyX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mořská pannaX = 0; rybaY = -10 + (10* Math.cos (t* 0,091)); fishX = 10 + (5* Math.sin (t* 0,07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mořská pannaX + "px bottom," + fishesX + "px" + fishesY + "px, vlevo nahoře"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
kde
window.requestAnimFrame = (funkce () (návrat window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funkce (zpětné volání) (60);));)) ( );

A mimochodem, animace se dají dělat i přes CSS3 Transitions / Animations, ale to je téma na samostatnou diskusi.

Paralaxní a interaktivní

Konečně, pomocí podobných manévrů můžete snadno přidat paralaxové efekty nebo interaktivní interakci s pozadím:

V takových scénářích se hodí více obrázků na pozadí, protože zatímco mluvíme pouze o pozadí (a ne o obsahu), jejich použití vám umožní vyhnout se přeplnění html kódu a DOM. Ale vše má svou cenu: nemohu přistupovat k jednotlivým prvkům kompozice podle názvu, id, třídy nebo jakéhokoli jiného parametru. Musím si jasně pamatovat pořadí prvků ve složení v kódu a pro každou změnu jakéhokoli parametru jakéhokoli prvku musím ve skutečnosti nalepit řádek popisující hodnoty tohoto parametru pro všechny prvky a aktualizovat jej pro celé složení.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mořská pannaX + "px bottom," + fishesX + "px" + fishesY + "px, vlevo nahoře";

Jsem si jistý, že to lze zabalit do pohodlného javascriptového kódu, který převezme virtualizaci vztahů s jednotlivými vrstvami, přičemž html kód stránky zanechá maximálně čistý.

Jak je to s kompatibilitou?

Všechny moderní verze populárních prohlížečů, včetně IE9 +, podporují více obrázků (můžete zkontrolovat například pomocí caniuse).

Můžete také použít Modernizr, abyste prohlížečům, které nepodporují více pozadí, poskytli alternativy. Jak napsal Chris Coyier ve své poznámce o pořadí vrstev při použití více pozadí, udělejte něco takového:

Multiplebgs body (/ * Úžasné vícenásobné BG deklarace, které přesahují realitu a imsources chicks * /) .no-multiplebgs body (/ * laaaaaame fallback * /)
Pokud jste zmatení z použití JS pro zajištění zpětné kompatibility, můžete jednoduše deklarovat pozadí dvakrát, ale to má také své nevýhody v podobě možného dvojitého načítání zdrojů (to závisí na implementaci zpracování css v konkrétním prohlížeči):

/ * vícenásobná záloha bg * / pozadí: # 000 url (...) ...; / * Úžasné vícenásobné deklarace BG, které překračují realitu a získávají kuřátka * / url na pozadí (...), url (...), url (...), # 000 url (...);

Pokud jste již začali přemýšlet o Windows 8, mějte na paměti, že při vývoji aplikací ve stylu metra můžete použít více pozadí, protože interně se používá stejný engine jako v IE10.

P.s. K tématu: Nemohu si nevzpomenout na fenomenální článek o

K jednomu prvku lze přidat několik obrázků pozadí najednou prostřednictvím vlastnosti jediné pozadí. To vám umožní vystačit si s jedním prvkem a vytvořit komplexní pozadí nebo jeden obrázek a zobrazit jej několikrát s různým nastavením. Všechny obrázky se svými parametry jsou uvedeny oddělené čárkami, zároveň je obrázek označen jako první, který se zobrazuje nad zbytkem obrázků, respektive poslední je nejnižší obrázek. Příklad 1 ukazuje, jak vytvořit pozadí se třemi obrázky.

Příklad 1. Tři pozadí

Pokud potřebujete samostatně nastavit nějakou vlastnost stylu pro pozadí, jako je velikost pozadí jako ve výše uvedeném příkladu, pak jsou parametry pro každé pozadí uvedeny oddělené čárkami. Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Pozadí se třemi obrázky

Samostatné obrázky pro pozadí vám umožňují změnit jejich polohu a animovat, jak je znázorněno v příkladu 2.

Příklad 2. Animované pozadí

Uvažujme nyní, jak pomocí jednoho obrázku vytvořit blok s rámečkem (obr. 2). Šířka bloku je pevná a výška se roztáhne v závislosti na objemu obsahu bloku.

Rýže. 2. Ručně kreslený rám

Na obrázku je jasně vidět horní a spodní část, které je nutné oříznout v grafickém editoru a umístit vodorovně. Střední část je zvolena tak, aby se svisle opakovala beze švů. Obrázek má výrazný opakující se vzor, ​​takže by neměly být problémy s výběrem. Ve výsledku získáte takto připravený obrázek (obr. 3). Kostkované políčko označuje průhlednost, umožňuje vám nastavit barvu pozadí spolu s obrázky a snadno je měnit pomocí stylů.

Rýže. 3. Připraveno pro obrázek na pozadí

Samotné pozadí je zobrazeno vlastností background, nastavuje také souřadnice požadovaného fragmentu. Parametry každého pozadí jsou uvedeny oddělené čárkami a v tomto případě záleží na jejich pořadí. Chceme, aby se horní a spodní část bloku nepřekrývaly, proto je položíme jako první (příklad 3). Barva pozadí je specifikována jako poslední.

Příklad 3. Více obrázků na pozadí

První pozadí kreslí horní okraj rámečku, druhé pozadí kreslí spodní a třetí vertikální okraje. Poslední je barva, která je viditelná v průhledné střední části bloku (obr. 4).

). Dnes si povíme něco málo o další zajímavé funkci – použití více obrázků na pozadí.

Složení pozadí

Existuje mnoho důvodů, proč obecně může být nutné poskládat několik obrázků na pozadí, z nichž nejdůležitější jsou:

• úspora provozu na velikosti obrázků, pokud jednotlivé obrázky dohromady váží méně než obrázek se zploštělými vrstvami a
• nutnost nezávislého chování jednotlivých vrstev např. při implementaci paralaxových efektů.

Mohou existovat i jiné rozumné důvody :)

Klasický přístup

Potřebujeme tedy umístit několik obrázků na pozadí nad sebe. Jak se tento úkol obvykle řeší? Je to velmi jednoduché: pro každý obrázek na pozadí se vytvoří blok a k němu se přiřadí odpovídající obrázek na pozadí. Bloky jsou buď vnořeny do sebe, nebo umístěny v řadě s příslušnými pravidly umístění. Zde je jednoduchý příklad:

Blok s třídou "rybaření" uvnitř "mořské panny" pouze pro demonstrační účely.

Nyní několik stylů:
.sample1 .more, .sample1 .mermaid, .sample1 .fishing (výška: 300px; šířka: 480px; pozice: relativní;) .sample1 .sea (pozadí: url (media / sea.png) repeat-x vlevo nahoře;) .sample1 .mermaid (pozadí: url (media / mořská panna.svg) repeat-x vlevo dole;) .sample1 .fish (pozadí: url (media / fish.svg) no-repeat; výška: 70px; šířka: 100px; vlevo : 30px; nahoře: 90px; pozice: absolutní;) .sample1 .fishing (pozadí: url (media / fishing.svg) bez opakování vpravo nahoře 10px;)

Výsledek:

V tomto příkladu jsou tři vnořená pozadí a jeden blok s rybami, umístěný vedle bloků "pozadí". Teoreticky lze rybu přesouvat například pomocí JavaScriptu nebo CSS3 Transitions / Animations.

Mimochodem, tento příklad používá novou syntaxi umístění na pozadí pro „.fishing“, také definovanou v CSS3:
pozadí: url (media / fishing.svg) bez opakování vpravo nahoře 10px;
V současné době je podporován v IE9 + a Opera 11+, ale není podporován ve Firefoxu 10 a Chrome 16. Uživatelé posledních dvou prohlížečů tedy zatím nebudou moci chytit ryby.

Více pozadí

Na pomoc přichází nová funkce přidaná do CSS3 – možnost definovat více obrázků na pozadí pro jeden prvek najednou. Vypadá to takto:

A odpovídající styly:
.sample2 .sea (výška: 300px; šířka: 480px; pozice: relativní; obrázek na pozadí: url ("media / fishing.svg"), url ("media / mořská panna.svg"), url ("media / sea. png "); background-position: vpravo nahoře 10px, vlevo dole, vlevo nahoře; background-repeat: no-repeat, repeat-x, repeat-x;) .sample2 .fish (background: url (" media / fish.svg ") bez opakování; výška: 70px; šířka: 100px; vlevo: 30px; nahoře: 90px; pozice: absolutní;)
Chcete-li definovat více obrázků, musíte použít pravidlo obrázku na pozadí, které uvádí jednotlivé obrázky oddělené čárkami. Další pravidla, také seznam, lze použít k nastavení umístění, opakování a dalších parametrů pro každý z obrázků. Věnujte pozornost pořadí, ve kterém jsou obrázky uvedeny: vrstvy jsou uvedeny zleva doprava od nejvyšší k nejnižší.

Výsledek je úplně stejný:

Jedno pravidlo

Pokud ryby nemusí být vybrány v samostatném bloku pro následné manipulace, lze celý obrázek přepsat jedním jednoduchým pravidlem:

Styly:
.sample3 .sea (výška: 300px; šířka: 480px; pozice: relativní; obrázek na pozadí: url ("media / fishing.svg"), url ("media / mořská panna.svg"), url ("media / fish. svg "), url (" media / sea.png "); poloha na pozadí: vpravo nahoře 10 pixelů, vlevo dole, 30 pixelů 90 pixelů, vlevo nahoře; opakování pozadí: neopakovat, opakovat-x;)

Obrázek s výsledkem nedám - věřte mi, shoduje se s dvěma obrázky výše. Dejte si ale opět pozor na styly, zejména na "background-repeat" - podle specifikace, pokud část seznamu na konci chybí, pak prohlížeč musí zadaný seznam opakovat tolikrát, kolikrát je potřeba, aby číslo odpovídalo obrázků v seznamu.

V tomto případě je ekvivalentní tomuto popisu:
background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;

Ještě kratší

Pokud si pamatujete CSS 2.1, definuje schopnost popsat obrázky na pozadí stručným způsobem. Co takhle více obrázků? Je také možné:

Sample4 .sea (výška: 300px; šířka: 480px; pozice: relativní; pozadí: url ("media / fishing.svg") vpravo nahoře 10px bez opakování, url ("media / mořská panna.svg") vlevo dole repeat-x , url ("media / fish.svg") 30px 90px bez opakování, url ("media / sea.png") repeat-x;)

Všimněte si však, že nyní nemůžete jen přeskočit hodnoty (pokud se neshodují s výchozím nastavením). Mimochodem, pokud chcete nastavit barvu obrázku na pozadí, musíte to udělat v úplně poslední vrstvě.

Dynamické obrázky

Pokud je kompozice statická nebo dynamická pouze v závislosti na velikosti kontejneru, pak vícenásobné pozadí zjevně zjednodušuje design stránky. Co když ale potřebujete pracovat s jednotlivými prvky kompozice nezávisle na javascriptu (přesunout, posouvat atd.)?

Mimochodem, zde je příklad ze skutečného života - téma s pampeliškou v Yandexu:


Pokud se ponoříte do kódu, uvidíte něco takového:

...

Bloky s třídami "b-fluff-bg", "b-fluff__cloud" a "b-fluff__item" obsahují obrázky na pozadí, které se navzájem překrývají. Navíc pozadí s mraky neustále roluje a po obrazovce létají pampelišky.

Dá se to přepsat pomocí více pozadí? V zásadě ano, ale za předpokladu 1) podpory této funkce v cílových prohlížečích a ... 2) čtěte dále;)

Jak přidám reproduktory na více pozadí? V takové situaci se ukazuje jako vhodné, že v interním pohledu prohlížeč rozhází jednotlivé parametry obrázku na pozadí podle příslušných pravidel. Například pro polohování existuje „poloha na pozadí“ a pro offsety ji stačí změnit. Použití více obrázků je však zpoplatněno – toto pravidlo (a jakékoli podobné pravidlo) musí uvádět polohu pro všechna pozadí nastavená pro váš blok, a to nemůžete dělat selektivně.

Chcete-li přidat animaci do našeho pozadí s rybami, můžete použít následující kód:
$ (document) .ready (function () (var sea = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mořská pannaX = 0; var t = 0; funkce animationLoop () (rybyY = 90 + Math.floor (30 * Math.sin (t ++ / 180,0)); if (- rybyX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mořská pannaX = 0; rybaY = -10 + (10* Math.cos (t* 0,091)); fishX = 10 + (5* Math.sin (t* 0,07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mořská pannaX + "px bottom," + fishesX + "px" + fishesY + "px, vlevo nahoře"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
kde
window.requestAnimFrame = (funkce () (návrat window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funkce (zpětné volání) (60);));)) ( );

A mimochodem, animace se dají dělat i přes CSS3 Transitions / Animations, ale to je téma na samostatnou diskusi.

Paralaxní a interaktivní

Konečně, pomocí podobných manévrů můžete snadno přidat paralaxové efekty nebo interaktivní interakci s pozadím:

V takových scénářích se hodí více obrázků na pozadí, protože zatímco mluvíme pouze o pozadí (a ne o obsahu), jejich použití vám umožní vyhnout se přeplnění html kódu a DOM. Ale vše má svou cenu: nemohu přistupovat k jednotlivým prvkům kompozice podle názvu, id, třídy nebo jakéhokoli jiného parametru. Musím si jasně pamatovat pořadí prvků ve složení v kódu a pro každou změnu jakéhokoli parametru jakéhokoli prvku musím ve skutečnosti nalepit řádek popisující hodnoty tohoto parametru pro všechny prvky a aktualizovat jej pro celé složení.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mořská pannaX + "px bottom," + fishesX + "px" + fishesY + "px, vlevo nahoře";

Jsem si jistý, že to lze zabalit do pohodlného javascriptového kódu, který převezme virtualizaci vztahů s jednotlivými vrstvami, přičemž html kód stránky zanechá maximálně čistý.

Jak je to s kompatibilitou?

Všechny moderní verze populárních prohlížečů, včetně IE9 +, podporují více obrázků (můžete zkontrolovat například pomocí caniuse).

Můžete také použít Modernizr, abyste prohlížečům, které nepodporují více pozadí, poskytli alternativy. Jak napsal Chris Coyier ve své poznámce o pořadí vrstev při použití více pozadí, udělejte něco takového:

Multiplebgs body (/ * Úžasné vícenásobné BG deklarace, které přesahují realitu a imsources chicks * /) .no-multiplebgs body (/ * laaaaaame fallback * /)
Pokud jste zmatení z použití JS pro zajištění zpětné kompatibility, můžete jednoduše deklarovat pozadí dvakrát, ale to má také své nevýhody v podobě možného dvojitého načítání zdrojů (to závisí na implementaci zpracování css v konkrétním prohlížeči):

/ * vícenásobná záloha bg * / pozadí: # 000 url (...) ...; / * Úžasné vícenásobné deklarace BG, které překračují realitu a získávají kuřátka * / url na pozadí (...), url (...), url (...), # 000 url (...);

Pokud jste již začali přemýšlet o Windows 8, mějte na paměti, že při vývoji aplikací ve stylu metra můžete použít více pozadí, protože interně se používá stejný engine jako v IE10.

P.s. K tématu: Nemohu si nevzpomenout na fenomenální článek o.