Když jsme na začátku této části hovořili o vlastnosti background-image, nezmínili jsme jednu věc: v CSS3 můžete pro jeden prvek přidat více pozadí jednoduchým vypsáním odděleným čárkami. To je obzvláště užitečné, když má prvek s pozadím proměnnou šířku nebo výšku a pozadí se musí přizpůsobit své velikosti.
Jak nastavit více pozadí v CSS
Ukážeme vám příklad, který se může v praxi hodit. Představme si, že potřebujeme umístit blok textu do rámečku. Rámeček je grafický soubor ve formátu PNG:
V tomto úkolu neznáme výšku textu - nevíme, zda text zcela zapadne do rámečku nebo překročí jeho hranice. Kvůli této neznámé hodnotě nemůžeme riskovat použití původního výkresu jako pozadí. Nos pomocí CSS můžeme tento rám prodloužit podle potřeby. Chcete -li to provést, budete muset původní výkres rozdělit na grafický editor do tří částí - horní, dolní a střední - a uložte každý soubor samostatně. Takhle:
Horní část rámu
Spodní část rámu
Uprostřed rámu
Vytvoříme pozadí s obrazem středu rámečku opakujícího se podél osy. Y zatímco horní a dolní část rámce nebudou duplikovány. Přidejme k prvku všechna tři pozadí a zapišme si další potřebné styly:
Rámeček (obrázek na pozadí: URL (https://goo.gl/tKyzHt),/ * nejlepší část framework */url (https://goo.gl/SUKymM),/ * Spodní část rámce */url (https://goo.gl/Km7HVV); / * střed okraje * / poloha na pozadí: střed nahoře, / * poloha horní části okraje * / střed dole, / * poloha spodní části okraje * / středový vrchol; / * poloha středu rámečku * / opakování pozadí: neopakuje se, / * horní část rámečku se neopakuje * / žádné opakování, / * spodní část rámečku se neopakuje * / opakování-y ; / * střed okraje se svisle opakuje * / background-size: obsahovat; / * zde pro všechna pozadí stejnou hodnotu* / výška: auto; / * výška bloku závisí na množství obsahu * / šířka: 400px; / * šířka bloku je pevná * / odsazení: 30 pixelů; / * blokové polstrování * /)
Každé pozadí musí být odděleno čárkou a až za posledním je středník označující konec deklarace. Pro pohodlí a lepší čitelnost kódu doporučujeme zadat každou adresu URL na nový řádek.
Obrázky na pozadí jsou uspořádány ve vrstvách - jedna pod druhou. Pozadí určené nejprve bude na horní vrstvě, druhé pozadí bude pod prvním, třetí bude pod prvními dvěma. Proto dáme obrázek doprostřed rámu úplně na konec - aby se nepřekrýval s horní a spodní částí.
Dále v kódu nastavíme vlastnosti pozice na pozadí a opakování pozadí pro každé pozadí (ve stejném pořadí jako obrázky na pozadí). Ano, uhodli jste správně: pokud je to nutné, můžete zadat hodnoty dalších vlastností pozadí oddělené čárkami. A pokud potřebujete použít jednu hodnotu na všechna pozadí, zapište si ji jako obvykle (v našem případě je to vlastnost background-size: contain).
Pojďme se podívat na výsledek:
Jak vidíte, rámeček je umístěn správně a nyní pěkně rámuje obsah bloku. Co se stane, když zvýšíme množství textu v bloku? Díváme se:
Prostřední část našeho rámečku byla několikrát svisle duplikována, jako by se natahovala na délku a přizpůsobovala se textu. Toto je účinek, který by nebyl možný, kdybychom použili jeden snímek. Pro přehlednost přidejme ještě více textu:
Několik pozadí lze samozřejmě použít i pro jiné účely. Ukázali jsme jen jeden příklad z mnoha. Zkuste si představit svoji situaci a procvičujte pomocí skupiny na pozadí.
Používání zkrácené notace
Vlastnost background také přijímá více hodnot. V případě použití více pozadí může být zkrácený zápis mnohem pohodlnější, protože je obtížnější se v něm zmást. Přepišme náš kód pro framework:
Pozadí: url (https://goo.gl/tKyzHt) center top/obsahovat no-repeat,/ * top of frame */url (https://goo.gl/SUKymM) center bottom/contain no-repeat,/ * spodní část rámečku */url (https://goo.gl/Km7HVV) střed nahoru/obsahovat opakování-y; / * střed rámečku * /
Tato možnost vypadá méně těžkopádně a srozumitelněji.
Prostřednictvím vlastnosti jednoho pozadí lze do jednoho prvku přidat několik obrázků na pozadí. To vám umožní použít jeden prvek k vytvoření složitého pozadí nebo jednoho obrázku a několikrát jej zobrazit pomocí různá nastavení... Všechny obrázky s jejich parametry jsou uvedeny odděleně čárkami, současně je nejprve zobrazen obrázek, který je zobrazen v horní části zbývajících obrázků, a poslední, respektive 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 v příkladu výše, 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
Oddělené obrázky na pozadí vám umožňují měnit jejich polohu a také animovat, jak ukazuje příklad 2.
Příklad 2. Animované pozadí
Uvažujme nyní, jak použít jeden obrázek k vytvoření bloku s rámečkem (obr. 2). Šířka bloku je pevná a výška se táhne v závislosti na objemu obsahu bloku.
Rýže. 2. Ručně kreslený rámeček
Na obrázku je jasně vidět horní a dolní část, které musí být vyříznuty v grafickém editoru a umístěny vodorovně. Střední část je zvolena tak, aby se vertikálně opakovala bez švů. Obrázek má výrazný opakující se vzor, takže s výběrem by neměly být žádné potíže. V důsledku toho získáte takto připravený obrázek (obr. 3). Zaškrtnuté políčko označuje průhlednost, umožňuje nastavit barevné pozadí spolu s obrázky a snadno je měnit pomocí stylů.
Rýže. 3. Připraveno pro obrázek na pozadí
Vlastní pozadí je zobrazeno vlastností pozadí, také nastavuje souřadnice požadovaného fragmentu. Parametry každého pozadí jsou uvedeny odděleně čárkami a v tento případ na jejich pořadí záleží. Chceme, aby se horní a dolní část bloku nepřekrývaly, proto je dáme na první místo (příklad 3). Barva pozadí je zadána jako poslední.
Příklad 3. Několik obrázků na pozadí
Huitzilopochtli - „kolibří čaroděj“, bůh války a slunce.
Tezcatlipoca - „kouřící zrcadlo“, hlavní bůh Aztéků.
Oběma bohům byly přineseny lidské oběti.
První pozadí nakreslí horní okraj rámečku, druhé pozadí nakreslí dno a třetí svislé ohraničení. Poslední je barva, která je viditelná v průhledné centrální části bloku (obr. 4).
Úkol
Přidejte dva obrázky na pozadí pro blok pomocí CSS3.
Řešení
Moderní prohlížeče vám umožňují přidat k prvku libovolný počet obrázků na pozadí se seznamem možností pro každé pozadí oddělenými čárkami. Stačí použít pozadí univerzální vlastnosti a nejprve pro něj určit jedno pozadí a druhé oddělené čárkami.
Jako příklad zvažte vytvoření svislých dekorativních čar vlevo a vpravo od bloku. Chcete -li to provést, nejprve připravte obrázky, které by se měly opakovat svisle bez švů. Na obr. 1 ukazuje obrázek na pozadí, který bude zobrazen na levém okraji, a na obr. 2 obrázek k zobrazení na pravém okraji.
Rýže. 1. Obrázek pozadí pro ohraničení vlevo
Rýže. 2. Obrázek pozadí pro ohraničení vpravo
Jako prvek bloku, ke kterému je přidáno pozadí, se obvykle používá značka
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 budeme pracovat na obrázcích na pozadí, které jsou nastaveny pomocí vlastnosti pozadí a jejích volitelných hodnot. Podívejme se na několik praktických příkladů při implementaci nastavení více pozadí na stejný prvek.
To se může hodit v mnoha případech a okamžicích. Zvláště v tomto případě použití pseudoelementů, protože jsou velmi flexibilní v parametrech.
Spousta obrázků na pozadí
Abychom nevytvořili blok uvnitř bloku, je nejjednodušší přidat k hlavnímu prvku jeden řádek pravidel a tím získáme kýžený výsledek... Můžeme to považovat za stručné možnosti, o to více, abychom vás nemuseli znovu kopat do zdrojového kódu. Vše bude provedeno pouze pomocí CSS.
Blockimg (pozadí: url ("img / img2.png"), / * nejvyšší pozadí a poté postupně * / url ("img / img3.png"), url ("img / img1.jpg"); pozice na pozadí : 370px střed, 120px 150px, střed uprostřed; / * poloha obrázků * / opakování pozadí: neopakování; / * opakování obrázku * / barva pozadí: # 444; / * pokud je potřeba barva pozadí * / rámeček stínu : 0 1px 2px rgba (0, 0, 0, 0,1); margin: 100px auto 15px; box-sizing: border-box; polstrování: 25px; šířka: 700px; min-výška: 300px;) / * zkratka * /. blockimg (pozadí: url ("img / img2.png") bez opakování 370px centrum, url ("img / img3.png") bez opakování 120px 150px, url ("img / img1.jpg") centrum bez opakování střed; okraj: 100 pixelů auto 15 pixelů; velikost rámečku: rámeček rámečku; polstrování: 25 pixelů; šířka: 700 pixelů; minimální výška: 300 pixelů;)
Vysvětlení. Dejte prvku obrázek na pozadí s uvedením cesty k jeho umístění. Oddělené čárkami dostáváme příležitost napsat mnoho dalších pozadí, jak můžete vidět v kódu výše. Pořadí jejich počtu určuje, který obrázek bude nad ostatními. To znamená, že první pozadí je nad všemi ostatními a posloupnost se řídí zásadou konvenčního grafického editoru.
Následuje Extra možnosti prostřednictvím jednotlivých vlastností: pozice, opakování, velikost, je -li to nutné, pak další barva. Dáváme také pozor, aby všechny parametry byly zapsány oddělené čárkami, ve stejném pořadí jako číslo obrázku.
A poslední detail. Veškerý kód lze zkrátit pomocí pouze jedné obecné vlastnosti pozadí. V příkladu kódu je druhá možnost, která ukazuje, jak se to dělá.
Obrázek na pozadí pomocí pseudoprvku
Také nezapomeňte na alternativní možnosti jako takové jsou pseudoelementy před a po. V jejich aplikaci je pozitivní plus - obraz lze přenést přes okraj prvku, aby nezmizel na hranici, ale byl na ní. Tato technika je užitečná, pokud potřebujete udělat něco jako 3D efekt.
Blockimg (background: url ("img / img1.jpg") no-repeat; / * element background * / position: relative; / * areaing area * / margin: 200px auto 15px; box-sizing: border-box; padding: 25px; šířka: 700px; min-výška: 300px;) .blockimg :: before (pozadí: url ("img / img1.png") střed středu bez opakování; dole: 0; obsah: ""; výška: 295px; vlevo: 0; pozice: absolutně; / * absolutní poloha * / vpravo: 0; nahoře: -150 pixelů;)
Vysvětlení. Ve skutečnosti je vše velmi jednoduché. Nastavte pozadí na hlavní prvek obvyklým způsobem. Dále přichází klíčová vlastnost: relativní; který definuje oblast pro pohyb jiného prvku, který je v hlavním prvku a má polohu: absolutní; ...
Místo jiného prvku, i když formálně, jde jako samostatná oblast, používáme pseudoelement. Dáme jí absolutní polohu a umístíme ji na místo, které potřebujeme.
). Dnes si povíme něco o další zajímavé funkci - použití více obrázků na pozadí.
Složení pozadí
Existuje mnoho důvodů, proč obecně budete muset na pozadí vytvořit několik obrázků. Mezi nejdůležitější z nich patří:
- úspora provozu na velikosti obrázků, pokud jednotlivé obrázky dohromady váží méně než obrázek se zploštělými vrstvami, a
- potřeba nezávislého chování jednotlivých vrstev, například při implementaci efektů paralaxy.
Klasický přístup
Musíme tedy umístit několik obrázků na pozadí nad sebou. Jak se tento úkol obvykle řeší? Je to velmi jednoduché: pro každý obrázek na pozadí je vytvořen blok a je mu přiřazen odpovídající obrázek na pozadí. Bloky jsou buď vnořené do sebe, nebo jsou umístěny v řadě s příslušnými pravidly určování polohy. 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 .sea, .sample1 .service, .sample1 .fishing (výška: 300px; šířka: 480px; poloha: relativní;) .sample1 .sea (pozadí: url (media / sea.png) opakování-x vlevo nahoře;) .sample1 .mermaid (pozadí: url (media / mermaid.svg) opakování-x dole vlevo;) .sample1 .fish (pozadí: url (media / fish.svg) no-repeat; výška: 70px; šířka: 100px; vlevo : 30 pixelů; nahoře: 90 pixelů; pozice: absolutně;). Ukázka1. Rybaření (pozadí: URL (media / fishing.svg) bez opakování vpravo nahoře 10 pixelů)
Výsledek: 
PROTI tento příklad tři vnořená pozadí a jeden blok s rybičkami, umístěný vedle bloků „pozadí“. S rybou lze teoreticky pohybovat například pomocí pomocí JavaScriptu nebo CSS3 Přechody / Animace.
Mimochodem, tento příklad používá novou syntaxi určování polohy na pozadí pro „.fishing“, definovanou také v CSS3:
pozadí: url (media / fishing.svg) no-repeat vpravo nahoře 10px;
Aktuálně 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 rybu.
Více pozadí
Na záchranu přichází nová funkce přidaná v CSS3 - možnost definovat více obrázků na pozadí pro jeden prvek najednou. Vypadá to takto:
A odpovídající styly:
. ukázka2 .sea (výška: 300px; šířka: 480px; poloha: relativní; obrázek na pozadí: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / sea. png "); poloha pozadí: vpravo nahoře 10 pixelů, vlevo dole, vlevo nahoře; opakování pozadí: neopakování, opakování x, opakování x;). ukázka2 .fish (pozadí: adresa URL (" media / fish.svg ") neopakování; výška: 70 pixelů; šířka: 100 pixelů; vlevo: 30 pixelů; nahoře: 90 pixelů; poloha: absolutní;)
Chcete-li definovat více obrázků, musíte použít pravidlo obrázek na pozadí, které vypisuje jednotlivé obrázky oddělené čárkami. K nastavení umístění, opakování a dalších parametrů pro každý z obrazů lze použít další pravidla, také seznam. Věnujte pozornost pořadí, ve kterém jsou obrázky uvedeny: vrstvy jsou uvedeny zleva doprava od nejvyššího do nejnižšího.
Výsledek je úplně stejný: 
Jedno pravidlo
Pokud pro následné manipulace není nutné rybu vybrat v samostatném bloku, lze celý obrázek přepsat jedním jednoduché pravidlo:Styly:
. ukázka3 .sea (výška: 300px; šířka: 480px; poloha: relativní; obrázek na pozadí: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), URL (" media / sea.png "); poloha na pozadí: vpravo nahoře 10 pixelů, dole vlevo, 30 pixelů 90 pixelů, vlevo nahoře; opakování pozadí: neopakování, opakování x;)
Nedám obrázek s výsledkem - věřte mi, že se shoduje se dvěma výše uvedenými obrázky. Věnujte ale opět pozornost stylům, zejména „opakování na pozadí“ - pokud podle specifikace chybí část seznamu na konci, musí prohlížeč zadaný seznam opakovat tolikrát, kolik je potřeba, aby odpovídal počet obrázků v seznamu.
V tomto případě je ekvivalentní tomuto popisu:
opakování na pozadí: ne-opakovat, opakovat-x, neopakovat, opakovat-x;
Ještě kratší
Pokud si pamatujete CSS 2.1, definuje to schopnost stručně popsat obrázky na pozadí. A co víc obrázků? Je také možné:Ukázka 4. Moře (výška: 300 pixelů; šířka: 480 pixelů; poloha: relativní; pozadí: adresa URL („media / fishing.svg“) vpravo nahoře 10 pixelů bez opakování, adresa URL („media / mermaid.svg“) vlevo dole opakování-x , url ("media / fish.svg") 30px 90px neopakování, url ("media / sea.png") opakování-x;)
Všimněte si však, že nyní nemůžete hodnoty jen přeskakovat (pokud se neshodují s výchozím nastavením). Mimochodem, pokud chcete nastavit barvu obrázku na pozadí, musí to být provedeno v úplně poslední vrstvě.
Dynamické obrázky
Pokud je kompozice statická nebo dynamická, ne více než v závislosti na velikosti kontejneru, pak více pozadí zjevně zjednodušuje návrh stránky. Co když ale potřebujete pracovat s jednotlivými prvky skladby nezávisle na javascriptu (přesun, posouvání atd.)?Mimochodem, zde je příklad ze skutečného života - téma s pampeliškou v Yandexu:
Pokud se prokopete 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í. Pozadí s mraky se navíc neustále posouvá a po obrazovce létají pampelišky.
Lze 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) čtení dále;)
Jak přidám reproduktory do více pozadí? V takové situaci se ukazuje jako výhodné, že v vnitřní reprezentace prohlížeč rozptyluje jednotlivé parametry obrázku na pozadí podle příslušných pravidel. Například pro polohování existuje „poloha na pozadí“ a pro ofsety stačí změnit pouze to. Používání více obrázků je však zpoplatněno - toto pravidlo (a jakékoli podobné pravidlo) musí uvádět pozici pro všechna pozadí nastavená pro váš blok a nemůžete to dělat selektivně.
Chcete -li přidat animaci na naše 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 mermaidX = 0; var t = 0; funkce animationLoop () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480;
mermaidX += 0.5;
if(mermaidX >480) mořská pannaX = 0; ryba Y = -10 + (10 * Mat.cos (t * 0,091)); fishX = 10 + (5 * Math.sin (t * 0,07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, top left"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
kde
window.requestAnimFrame = (funkce () (návratové okno.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funkce (zpětné volání) (60);)); );
A mimochodem, animace lze provádět také pomocí CSS3 Transitions / Animations, ale to je téma na samostatnou diskusi.
Paralaxní a interaktivní
Nakonec pomocí podobných manévrů můžete snadno přidat efekty paralaxy nebo interaktivní interakce 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í se vyhne nepořádku html a DOM. Za všechno ale musíte zaplatit: nemohu odkazovat na jednotlivé prvky skladby jménem, id, třídou ani žádným jiným parametrem. Musím si jasně zapamatovat 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 slepit řá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," + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, top left";
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 zůstane co nejč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).Pomocí Modernizru můžete také poskytnout prohlížečům, která nepodporují více pozadí, alternativní řešení. Jak napsal Chris Coyier ve své poznámce k pořadí vrstev při použití více pozadí, proveďte něco takového:
Tělo Multiplebgs ( / * Úžasné vícenásobné deklarace BG, které přesahují realitu a získávají kuřata * /) .no-multiplebgs body ( / * laaaaaame fallback * /)
Pokud jste zmateni v používání JS k zajištění zpětné kompatibility, můžete jednoduše deklarovat pozadí dvakrát, ale to má také své stinné stránky v podobě možných duální načítání prostředky (záleží na implementaci zpracování css v konkrétním prohlížeči):
/ * záloha více bg * / pozadí: # 000 URL (...) ...; / * Úžasné více deklarací BG, které přesahují realitu a získávají kuřata * / 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