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 téměř každý design webových stránek obsahuje krásný obrázek na pozadí.

Každý návrhář rozvržení ví, že nejjednodušší způsob, jak vytvořit návrh, je ten nejlepší, jaký může být. Jednou z jednoduchých a pohodlných technik je použití několika řádky css kód.

Zdálo by se to jako maličkost, ale přesto je občas potřeba udělat něco složitého jednoduchým způsobem. Například implementujte několik pozadí s individuálními parametry bez použití pomocných bloků div. Tedy úspora.

V tomto článku se podíváme na syntaxi kódu, která podporuje více pozadí v jednom prvku. Takto to vypadá v reálném životě:

CSS kód pro více pozadí

Více obrázků na pozadí je implementováno pomocí více hodnot css parametr pozadí, které jsou odděleny čárkou:

#multipleBGs ( background: url(photo1.png), url(photo2.png), url(photo3.png) ; background-repeat: no-repeat, no-repeat, repeat-y; background-position: 0 0, 30px 70px, vpravo nahoře; šířka: 400px; výška: 400px; ohraničení: 1px plný #ccc; )

Pokusil jsem se udělat totéž s krátkým kódem. Bohužel to nejde.

Navíc můžete použít další vlastnosti pozadí (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Stejné jako s přechody CSS.

To je vše! Doufám, že se vám tato technika vytváření více pozadí, bez použití jakýchkoli pomocných prvků, líbila. Čistý sémantický kód.

Pokud máte nějaké dotazy, připomínky nebo návrhy k této technice pro vytváření více pozadí, napište do komentářů. Taky bych chtěl otestovat

). 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 left left; ) .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časné době 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. Pozor ale opět na styly, zejména „background-repeat“ – podle specifikace, pokud část seznamu na konci chybí, pak musí prohlížeč zadaný seznam zopakovat tolikrát, aby odpovídal počtu obrázků 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 .

Dnes budeme pracovat na obrázcích pozadí, které se nastavují pomocí vlastnosti background a jejích dalších hodnot. Podívejme se na pár praktických příkladů instalace více pozadí pro stejný prvek.

To může být užitečné v mnoha případech a momentech. Zejména použití pseudo prvků v tomto případě, protože jsou velmi flexibilní v parametrech.

Spousta obrázků na pozadí

Aby nevznikal blok v bloku, nejjednodušší je přidat jeden řádek pravidel k hlavnímu prvku a získat tak požadovaný výsledek. Můžeme to považovat za lakonickou možnost, zejména proto, že eliminuje potřebu znovu jít do zdroj. Vše bude provedeno pouze pomocí CSS.

Blockimg( background: url("img/img2.png"),/*nejvyšší pozadí a pak postupně*/ url("img/img3.png"), url("img/img1.jpg"); pozice na pozadí : 370px střed, 120px 150px, střed střed;/*pozice obrázků*/ opakování pozadí: neopakování;/*opakování obrázku*/ barva pozadí: #444;/*pokud je potřeba barva pozadí*/ stínovaný rámeček: 0 1px 2px rgba(0, 0, 0, 0,1); margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) /*zkrácená verze*/ . blockimg ( pozadí: url("img/img2.png") střed bez opakování 370px, url("img/img3.png") bez opakování 120px 150px, url("img/img1.jpg") střed bez opakování střed ; okraj: 100px automaticky 15px; velikost rámečku: okrajový rámeček; odsazení: 25px; šířka: 700px; minimální výška: 300px; )

Vysvětlení. Dáváme prvku obrázek na pozadí, který označuje cestu k jeho umístění. Odděleni čárkami máme možnost zadat mnohem více pozadí, jak je vidět v kódu výše. Pořadí jejich čísel určuje, který obrázek bude nad ostatními. To znamená, že první pozadí je vyšší než všechny ostatní a pak se sekvence řídí principem běžného grafického editoru.

Dále se prostřednictvím jednotlivých vlastností specifikují další parametry: poloha, opakování, velikost a v případě potřeby barva. Vezměte prosím na vědomí, že všechny parametry jsou psány oddělené čárkami ve stejném pořadí jako číslo obrázku.

A poslední detail. Celý kód lze zkrátit použitím pouze jedné obecné vlastnosti, background . V příkladu kódu je druhá možnost, která ukazuje, jak se to dělá.

Obrázek na pozadí prostřednictvím pseudo prvku

Také nezapomeňte alternativní možnosti jako takové jsou pseudoprvky před a po. V jejich použití je pozitivní výhoda – obrázek lze posunout za okraj prvku, takže nezmizí na hranici, ale je nad ní. Tato technika se vám bude hodit, pokud potřebujete vytvořit něco jako 3D efekt.

Blockimg( background: url("img/img1.jpg") bez opakování;/*pozadí prvku*/ pozice:relativní;/*oblast umístění*/ okraj: 200px automaticky 15px; velikost rámečku: border-box; výplň: 25px; width:700px; min-height: 300px; ) .blockimg::before( background: url("img/img1.png") střed bez opakování; dole: 0; obsah: ""; výška: 295px; vlevo: 0; pozice: absolutní;/*absolutní umístění*/ vpravo: 0; nahoře: -150px; )

Vysvětlení. Ve skutečnosti je vše velmi jednoduché. Pozadí nastavíme na hlavní prvek obvyklým způsobem. Následuje pozice klíčové vlastnosti: relativní; , který definuje oblast pro přesun dalšího prvku, který je v hlavním prvku a má vlastnost position:absolute; .

Namísto jiného prvku, i když formálně jde jako samostatná oblast, používáme pseudoprvek. Dáme mu absolutní polohu a umístíme ho na místo, které potřebujeme.