kvôli jeho pohodlnosti a všestrannosti, aby sa odlíšil od iných prvkov, je k nemu pridaná trieda bloku (príklad 1).

Príklad 1: Dva obrázky na pozadí

HTML5 CSS3 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 3.

Dnes takmer každý dizajn webovej stránky obsahuje krásny obrázok na pozadí.

Každý dizajnér rozloženia vie, že najjednoduchší spôsob vytvorenia dizajnu je ten najlepší, aký môže byť. Jednou z jednoduchých a pohodlných techník je použitie niekoľkých linky css kód.

Zdalo by sa to ako maličkosť, no aj tak občas treba urobiť niečo komplikované jednoduchým spôsobom. Napríklad implementujte niekoľko pozadí s individuálnymi parametrami bez použitia pomocných blokov div. Teda šetrenie.

V tomto článku sa pozrieme na syntax kódu, ktorý podporuje viacero pozadí v jednom prvku. Takto to vyzerá v reálnom živote:

CSS kód pre viaceré pozadia

Viacero obrázkov na pozadí je implementovaných pomocou viacerých hodnôt css parameter pozadia, ktoré sú oddelené kómou:

#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 hore; šírka: 400px; výška: 400px; orámovanie: 1px plné #ccc; )

Pokúsil som sa urobiť to isté s krátkym kódom. Žiaľ, nejde to.

Navyše môžete použiť ďalšie vlastnosti pozadia (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Rovnako ako s prechodmi CSS.

To je všetko! Dúfam, že sa vám páčila táto technika vytvárania viacerých pozadí, bez použitia akýchkoľvek pomocných prvkov. Čistý sémantický kód.

Ak máte nejaké otázky, pripomienky alebo návrhy týkajúce sa tejto techniky na vytváranie viacerých pozadí, napíšte do komentárov. Tiež by som chcel otestovať

). Dnes si povieme niečo o ďalšej zaujímavej funkcii – používaní viacerých obrázkov na pozadí.

Zloženie pozadia

Existuje mnoho dôvodov, prečo by ste vôbec mohli chcieť komponovať viacero obrázkov na pozadí, z ktorých najdôležitejšie sú:

• úspora návštevnosti na veľkosti obrázkov, ak jednotlivé obrázky vážia celkovo menej ako obrázok so sploštenými vrstvami a
• potreba nezávislého správania sa jednotlivých vrstiev napríklad pri realizácii paralaxových efektov.

Možno sú aj iné rozumné dôvody :)

Klasický prístup

Preto musíme umiestniť niekoľko obrázkov na pozadí jeden na druhý. Ako sa tento problém zvyčajne rieši? Je to veľmi jednoduché: pre každý obrázok na pozadí sa vytvorí blok, ku ktorému je priradený zodpovedajúci obrázok na pozadí. Bloky sú buď vnorené do seba, alebo umiestnené v rade s príslušnými pravidlami umiestnenia. Tu je jednoduchý príklad:

Blok s triedou "rybárstvo" vo vnútri "morská panna" slúži len na demonštračné účely.

Teraz niekoľko štýlov:
.sample1 .more, .sample1 .morská panna, .sample1 .fishing (výška:300px; šírka:480px; poloha: relatívna; ) .sample1 .more (pozadie: url(media/more.png) repeat-x vľavo hore; ) .sample1 .morská panna ( pozadie: url(media/mermaid.svg) repeat-x vľavo dole; ) .sample1 .fish ( background: url(media/fish.svg) no-repeat; height:70px; width:100px; left : 30px; hore: 90px; pozícia: absolútna; ) .sample1 .fishing ( background: url(media/fishing.svg) bez opakovania vpravo hore 10px; )

výsledok:

V tomto príklade sú tri vnorené pozadia a jeden blok s rybami umiestnenými vedľa blokov „pozadia“. Teoreticky je možné ryby presúvať napríklad pomocou JavaScriptu alebo CSS3 Transitions/Animations.

Mimochodom, tento príklad pre „.fishing“ používa novú syntax pre umiestnenie na pozadí, ktorá je tiež definovaná v CSS3:
pozadie: url(media/fishing.svg) bez opakovania vpravo hore 10px;
V súčasnosti je podporovaný v IE9+ a Opera 11+, ale nie je podporovaný vo Firefoxe 10 a Chrome 16. Používatelia posledných dvoch prehliadačov teda zatiaľ nebudú môcť chytať ryby.

Viaceré pozadia

Na pomoc prichádza nová možnosť pridaná do CSS3 – možnosť definovať viacero obrázkov na pozadí pre jeden prvok. Vyzerá to takto:

A zodpovedajúce štýly:
.sample2 .sea ( výška:300px; šírka:480px; poloha: relatívna; obrázok na pozadí: url("media/fishing.svg"), url("media/morska panna.svg"), url("media/more. png"); background-position: 10px vpravo hore, vľavo dole, vľavo hore; background-repeat: no-repeat, repeat-x, repeat-x ; ) .sample2 .fish ( background: url("media/fish.svg) ") bez opakovania; výška: 70px; šírka: 100px; vľavo: 30px; hore: 90px; pozícia: absolútna; )
Ak chcete definovať viacero obrázkov, musíte použiť pravidlo obrázka na pozadí, v ktorom sú jednotlivé obrázky oddelené čiarkami. Ďalšie pravidlá, tiež zoznam, môžu nastaviť umiestnenie, opakovanie a ďalšie parametre pre každý obrázok. Všimnite si poradie, v akom sú obrázky uvedené: vrstvy sú zoradené zľava doprava od najvyššieho po najspodnejší.

Výsledok je úplne rovnaký:

Jedno pravidlo

Ak ryby nie je potrebné rozdeliť do samostatného bloku pre následné manipulácie, celý obrázok je možné prepísať jedným jednoduchým pravidlom:

Štýly:
.sample3 .sea ( výška:300px; šírka:480px; poloha: relatívna; obrázok na pozadí: url("media/fishing.svg"), url("media/morska panna.svg"), url("media/fish. svg"), url("media/sea.png"); pozícia na pozadí: vpravo hore 10 pixelov, vľavo dole, 30 pixelov 90 pixelov, vľavo hore; opakovanie pozadia: bez opakovania, opakovanie-x; )

Nebudem ukazovať obrázok výsledku - verte mi, zhoduje sa s dvoma obrázkami vyššie. Opäť si však dávajte pozor na štýly, najmä „background-repeat“ - podľa špecifikácie, ak časť zoznamu na konci chýba, prehliadač musí zadaný zoznam zopakovať toľkokrát, aby zodpovedal počtu obrázkov v zozname.

V tomto prípade je to ekvivalentné tomuto popisu:
background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;

Ešte kratšie

Ak si pamätáte CSS 2.1, definovalo schopnosť popísať obrázky na pozadí v krátkej forme. Čo tak viacero obrázkov? Toto je tiež možné:

Sample4 .sea (výška:300px; šírka:480px; pozícia: relatívna; pozadie: url("media/fishing.svg") vpravo hore 10px bez opakovania, url("media/morska panna.svg") vľavo dole repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Pamätajte však, že teraz nemôžete len preskočiť hodnoty (pokiaľ sa nezhodujú s predvolenou hodnotou). Mimochodom, ak chcete nastaviť farbu obrázka na pozadí, musíte to urobiť v poslednej vrstve.

Dynamické obrázky

Ak je kompozícia statická alebo dynamická nanajvýš v závislosti od veľkosti kontajnera, potom viacero pozadí zjavne zjednodušuje dizajn stránky. Čo však v prípade, ak potrebujete pracovať s jednotlivými prvkami kompozície nezávisle od javascriptu (presun, scroll atď.)?

Mimochodom, tu je príklad zo života - téma s púpavou v Yandex:


Ak sa pozriete do kódu, uvidíte niečo takéto:

...

Bloky s triedami "b-fluff-bg", "b-fluff__cloud" a "b-fluff__item" obsahujú obrázky na pozadí, ktoré sa navzájom prekrývajú. Okrem toho sa pozadie s oblakmi neustále posúva a po obrazovke lietajú púpavy.

Dá sa to prepísať pomocou viacerých pozadí? V zásade áno, ale za predpokladu 1) podpory tejto funkcie v cieľových prehliadačoch a... 2) čítajte ďalej ;)

Ako pridať dynamiku viacerým pozadiam? V takejto situácii sa ukazuje ako vhodné, že v internej reprezentácii prehliadač distribuuje jednotlivé parametre obrázkov na pozadí podľa príslušných pravidiel. Napríklad pre polohovanie existuje „pozícia na pozadí“ a pre posuny stačí zmeniť iba toto. Používanie viacerých obrázkov je však spoplatnené – toto pravidlo (a akékoľvek podobné) vyžaduje, aby ste uviedli polohu pre všetky pozadia definované pre váš blok, a nemôžete to robiť selektívne.

Ak chcete pridať animáciu na naše pozadie rýb, môžete použiť nasledujúci kód:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var morská pannaX = 0; var t = 0; funkcia animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) morská pannaX = 0; rybaY = -10 + (10* Math.cos(t*0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "top" + rybaY + "px vpravo" + rybaX + "px, " + morská pannaX + "px dole," + rybyX + "px" + rybyY + "px, vľavo hore"; 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 mimochodom, animácie sa dajú robiť aj pomocou CSS3 Transitions/Animations, ale to je téma na samostatnú diskusiu.

Paralaxa a interaktivita

Nakoniec, podobné manévre môžu ľahko pridať paralaxové efekty alebo interaktívnu interakciu s pozadím:

V takýchto scenároch sú užitočné viaceré obrázky na pozadí, pretože zatiaľ čo hovoríme iba o pozadí (a nie o obsahu), ich použitie nám umožňuje vyhnúť sa zahadzovaniu html kódu a DOM. Ale všetko má svoju cenu: nemôžem pristupovať k jednotlivým prvkom kompozície podľa názvu, ID, triedy alebo akéhokoľvek iného parametra. Musím si výslovne zapamätať poradie prvkov v zložení v kóde a pri každej zmene akéhokoľvek parametra akéhokoľvek prvku musím v skutočnosti zlepiť riadok popisujúci hodnoty tohto parametra pre všetky prvky a aktualizovať ho pre celé zloženie.

Sea.style.backgroundPosition = "top" + rybaY + "px vpravo" + rybaX + "px, " + morská pannaX + "px dole," + rybyX + "px" + rybyY + "px, vľavo hore";

Som si istý, že sa to dá zabaliť do pohodlného javascriptového kódu, ktorý sa postará o virtualizáciu vzťahov s jednotlivými vrstvami, pričom html kód stránky zanechá maximálne čistý.

A čo kompatibilita?

Všetky moderné verzie populárnych prehliadačov, vrátane IE9+, podporujú viacero obrázkov (môžete skontrolovať napríklad Caniuse).

Modernizr môžete použiť aj na poskytnutie alternatívnych riešení pre prehliadače, ktoré nepodporujú viaceré pozadia. Ako napísal Chris Coyier vo svojom príspevku o poradí vrstiev pri použití viacerých pozadí, urobte niečo také:

Multiplebgs body ( /* Úžasné viacnásobné BG deklarácie, ktoré prekračujú realitu a získavajú kurčatá */ ) .no-multipgs body ( /* laaaaaame fallback */ )
Ak máte obavy z použitia JS na zabezpečenie spätnej kompatibility, môžete jednoducho deklarovať pozadie dvakrát, aj keď to má aj svoje nevýhody v podobe možného dvojitého načítania zdrojov (závisí to od implementácie spracovania css v konkrétnom prehliadači):

/* viacnásobná záloha bg */ pozadie: #000 url(...) ...; /* Úžasné viacnásobné deklarácie BG, ktoré presahujú realitu a získavajú kurčatá */ background url(...), url(...), url(...), #000 url(...);

Ak ste už začali uvažovať o Windows 8, majte na pamäti, že pri vývoji aplikácií v štýle metra môžete použiť viacero pozadí, keďže používa rovnaký engine ako IE10.

P.s. K téme: Nemôžem si pomôcť, ale pamätám si fenomenálny článok o .

Dnes budeme pracovať na obrázkoch na pozadí, ktoré sa nastavujú pomocou vlastnosti pozadia a jej dodatočných hodnôt. Pozrime sa na pár praktických príkladov inštalácie viacerých pozadí pre rovnaký prvok.

To môže byť užitočné v mnohých prípadoch a momentoch. Najmä použitie pseudo prvkov v tomto prípade, pretože sú veľmi flexibilné v parametroch.

Veľa obrázkov na pozadí

Aby nevznikol blok v rámci bloku, najjednoduchším spôsobom je pridať jeden riadok pravidiel k hlavnému prvku a získať tak požadovaný výsledok. Môžeme to považovať za lakonickú možnosť, najmä preto, že eliminuje potrebu znova sa do toho pustiť zdroj. Všetko sa bude robiť iba pomocou CSS.

Blockimg( background: url("img/img2.png"),/*najvyššie pozadie a potom postupne*/ url("img/img3.png"), url("img/img1.jpg"); poloha na pozadí : 370px stred, 120px 150px, stred stred;/*pozícia obrázkov*/ background-repeat: no-repeat;/*repeat picture*/ background-color: #444;/*ak je potrebná farba pozadia*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0,1); margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) /*skrátená verzia*/ . blockimg ( pozadie: url("img/img2.png") stred bez opakovania 370 pixelov, url("img/img3.png") bez opakovania 120 pixelov 150 pixelov, url("img/img1.jpg") stred bez opakovania stred ; okraj: 100 pixlov automaticky 15 pixlov; veľkosť poľa: ohraničenie; výplň: 25 pixlov; šírka: 700 pixlov; minimálna výška: 300 pixlov; )

Vysvetlenie. Prvku dávame obrázok na pozadí, ktorý označuje cestu k jeho umiestneniu. Oddelené čiarkami máme možnosť zadať oveľa viac pozadí, ako je vidieť v kóde vyššie. Poradie ich čísel určuje, ktorý obrázok bude nad ostatnými. To znamená, že prvé pozadie je vyššie ako všetky ostatné a potom sa postupnosť riadi princípom bežného grafického editora.

Ďalej sa prostredníctvom jednotlivých vlastností špecifikujú ďalšie parametre: poloha, opakovanie, veľkosť a v prípade potreby farba. Upozorňujeme tiež, že všetky parametre sa píšu oddelené čiarkami v rovnakom poradí ako je číslo na obrázku.

A posledný detail. Celý kód je možné skrátiť použitím iba jednej všeobecnej vlastnosti, pozadia . V príklade kódu je druhá možnosť, ktorá ukazuje, ako sa to robí.

Obrázok na pozadí prostredníctvom pseudo prvku

Tiež nezabudnite na alternatívne možnosti ako také sú pseudoprvky pred a po. V ich použití je pozitívna výhoda – obrázok sa dá posunúť za okraj prvku, takže na hranici nezmizne, ale je na nej. Táto technika sa vám bude hodiť, ak potrebujete vytvoriť niečo ako 3D efekt.

Blockimg( background: url("img/img1.jpg") no-repeat;/*element background*/ position:relative;/*position area*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25px; šírka:700px; min-výška: 300px; ) .blockimg::before( background: url("img/img1.png") stred bez opakovania; dole: 0; obsah: ""; výška: 295px; vľavo: 0; pozícia: absolútna;/*absolútna pozícia*/ vpravo: 0; hore: -150px; )

Vysvetlenie. V skutočnosti je všetko veľmi jednoduché. Pozadie nastavíme na hlavný prvok bežným spôsobom. Nasleduje pozícia kľúčovej vlastnosti: relatívna; , ktorý definuje oblasť pre presun ďalšieho prvku, ktorý je v hlavnom prvku a má vlastnosť position:absolute; .

Namiesto iného prvku, hoci formálne ide ako samostatná oblasť, používame pseudoprvok. Dáme mu absolútnu polohu a umiestnime ho na miesto, ktoré potrebujeme.