Více pozadí v css3. Více pozadí pomocí CSS nebo více pozadí

.

V CSS 2 je nemožné přidat dvě pozadí k jednomu prvku současně, takže musíte jeden prvek vnořit do druhého a každému dát vlastní obrázek na pozadí. Pro složité dispozice Někdy je takových investic asi tucet. Je jasné, že takový pile-up nevede k ničemu dobrému, ale co dělat? Ukazuje se, že tam něco je! V CSS 3 můžete k libovolnému prvku přidat více obrázků na pozadí současně. Vezmeme tedy blokovou kresbu (obr. 1), rozřežeme ji na kousky a začneme ji testovat v prohlížečích.

Rýže. 1. Blokovat pro web

Pro jednoduchost vezmu šířku bloku jako pevnou velikost a výška se bude lišit v závislosti na obsahu. Horní a spodní část je na výkresu dobře vidět, v editoru je vystřihnu a složím do vrstev v samostatném souboru. Střední část musí být zvolena tak, aby se svisle opakovala bez švů. Design má dobře definovaný opakující se vzor, ​​takže by neměly být žádné potíže s jeho zvýrazněním. Kopíruji a vkládám do předchozích fragmentů. Výsledkem bude takový obrázek (obr. 2).

Rýže. 2. Připravené obrázky

V zásadě můžete každý fragment uložit jako samostatný soubor, ale CSS sprity (tzv. technologie lepení více obrázků do jednoho) mají řadu výhod. Za prvé se snižuje počet požadavků na server díky snížení počtu souborů a za druhé se celkově rychleji načítají a zobrazují obrázky.

Samotné pozadí je zobrazeno pomocí vlastnosti background, která také určuje 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í. Chci, aby se horní a spodní část bloku nepřekrývaly, takže je dám jako první (příklad 1).

Příklad 1. Několik obrázků na pozadí

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

První pozadí zobrazuje horní okraj bloku, druhé pozadí - spodní a třetí - vertikální okraje.

Kontrolujeme prohlížeče. internet Explorer 8 nezobrazoval vůbec žádné obrázky, ostatní prohlížeče (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) zobrazily rámeček správně (obr. 3).

Rýže. 3. Zobrazení snímků v prohlížeči Safari

Použití více pozadí vývojářům výrazně usnadňuje situaci, zejména při rozkládání bloků. Zbývá jen jedna maličkost. Je nutné, aby přestal existovat prohlížeč IE 6–8.

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

Složení pozadí

Existuje mnoho důvodů, proč vůbec chtít skládat více obrázků na pozadí, z nichž nejdůležitější jsou:

• úspora provozu na velikosti obrázků, pokud jednotlivé obrázky váží celkově 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ů.

Možná jsou i jiné rozumné důvody :)

Klasický přístup

Potřebujeme tedy umístit několik obrázků na pozadí jeden na druhý. Jak se tento problém obvykle řeší? Je to velmi jednoduché: pro každý obrázek na pozadí je vytvořen blok, ke kterému je přiřazen odpovídající obrázek na pozadí. Bloky jsou buď vnořené 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á panna" je 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/mermaid.svg) repeat-x dole vlevo; ) .sample1 .fish ( background: url(media/fish.svg) no-repeat; height:70px; width:100px; left : 30px; nahoře: 90px; pozice: absolutní; ) .sample1 .fishing ( background: url(media/fishing.svg) neopakovatelné nahoře vpravo 10px; )

Výsledek:

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

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

Více pozadí

Na pomoc přichází nová možnost přidaná do CSS3 – možnost definovat více obrázků na pozadí pro jeden prvek. 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/mermaid.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) ") no-repeat; 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, mohou nastavit umístění, opakování a další parametry pro každý obrázek. Všimněte si pořadí, ve kterém jsou obrázky uvedeny: vrstvy jsou uvedeny zleva doprava od nejvyššího k nejnižšímu.

Výsledek je úplně stejný:

Jedno pravidlo

Pokud ryby nemusí být pro následné manipulace rozděleny do samostatného bloku, lze celý obrázek přepsat pomocí jednoho jednoduchého pravidla:

Styly:
.sample3 .sea ( výška:300px; šířka:480px; pozice: relativní; obrázek na pozadí: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); background-position: vpravo nahoře 10px, vlevo dole, 30px 90px, vlevo nahoře; background-repeat: no-repeat, repeat-x; )

Nebudu ukazovat obrázek výsledku - věřte mi, shoduje se se dvěma obrázky výše. Věnujte však opět pozornost stylům, zejména „background-repeat“ - podle specifikace, pokud část seznamu na konci chybí, musí prohlížeč zadaný seznam opakovat tolikrát, aby odpovídal počtu obrázky v seznamu.

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

Ještě kratší

Pokud si pamatujete CSS 2.1, definovalo schopnost popsat obrázky na pozadí v krátké podobě. Co takhle více obrázků? To 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/mermaid.svg") vlevo dole repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Ale všimněte si, že nyní nemůžete jen přeskočit hodnoty (pokud neodpovídají výchozí hodnotě). 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 nanejvýš dynamická v závislosti na velikosti kontejneru, pak vícenásobné pozadí zjevně zjednodušuje návrh 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 života - téma s pampeliškou v Yandexu:


Pokud se podívá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í. Pozadí s mraky se navíc 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řidat dynamiku více pozadím? V takové situaci se ukazuje jako vhodné, že v interní reprezentaci prohlížeč rozděluje jednotlivé parametry obrázků na pozadí podle příslušných pravidel. Například pro polohování je „pozadí-pozice“ a pro směny stačí změnit pouze toto. Používání více obrázků je však zpoplatněno – toto pravidlo (a jakékoli podobné) vyžaduje, abyste uvedli pozici pro všechna pozadí definovaná pro váš blok, a nemůžete to dělat selektivně.

Chcete-li přidat animaci na naše pozadí ryb, 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() ( 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; 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 = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60 ); )); )) ();

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

Paralaxa a interaktivita

A konečně, podobné manévry mohou snadno přidat paralaxové efekty nebo interaktivní interakci s pozadím:

V takových scénářích je užitečné více obrázků na pozadí, protože zatímco mluvíme pouze o pozadí (a ne o obsahu), jejich použití nám umožňuje vyhnout se zahazování html kódu a DOM. Ale všechno má svou cenu: Nemohu přistupovat k jednotlivým prvkům kompozice podle názvu, ID, třídy nebo jiného parametru. Musím si výslovně 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 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, " + mořská pannaX + "px bottom," + fishesX + "px" + fishesY + "px, vlevo nahoře";

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

A co kompatibilita?

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

Můžete také použít Modernizr k poskytování alternativních řešení pro prohlížeče, které nepodporují více pozadí. Jak napsal Chris Coyier ve svém příspěvku 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řekračují realitu a imsources chicks */ ) .no-multipgs body ( /* laaaaaame fallback */ )
Pokud se obáváte použití JS pro zajištění zpětné kompatibility, můžete jednoduše deklarovat pozadí dvakrát, i když 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 lákají 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 používá stejný engine jako IE10.

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

Úkol

Přidejte dva obrázky pozadí pro blok s pomocí CSS 3.

Řešení

Moderní prohlížeče umožňují přidat k prvku libovolný počet obrázků na pozadí, přičemž uvádějí parametry každého pozadí oddělené čárkami. Stačí použít vlastnost universal background a zadat pro ni nejprve jedno pozadí a druhé oddělené čárkou.

Zvažte například vytvoření vertikální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 spojů. Na Obr. 1 ukazuje obrázek pozadí, který se zobrazí na levém okraji a na Obr. 2 obrázek pro zobrazení na pravém okraji.

Rýže. 1. Obrázek na pozadí pro okraj vlevo

Rýže. 2. Obrázek na pozadí pro okraj vpravo

Prvek bloku, ke kterému se přidává pozadí, je obvykle tag