Dvojno ozadje. Kako narediti več slik ozadja CSS. Primer kode: več slik za ozadje

Ko smo na začetku tega razdelka govorili o lastnosti background-image, nismo omenili ene stvari: v CSS3 lahko dodate več ozadij za en element tako, da jih preprosto navedete, ločene z vejicami. To je še posebej uporabno, če ima element z ozadjem spremenljivo širino ali višino in se mora ozadje prilagoditi svoji velikosti.

Kako nastaviti več ozadij v CSS

Pokazali vam bomo primer, ki vam bo morda prav prišel v praksi. Predstavljajmo si, da moramo blok besedila postaviti v okvir. Okvir je grafična datoteka v formatu PNG:

Pri tej nalogi ne poznamo višine besedila – ne vemo, ali se bo besedilo povsem prilegalo okvirju ali bo preseglo njegove meje. Zaradi te neznane vrednosti ne moremo tvegati uporabe originalne risbe okvirja kot ozadja. Toda s CSS lahko to mejo prisilimo, da se po potrebi podaljša. Če želite to narediti, boste morali originalno risbo v grafičnem urejevalniku razdeliti na tri dele - zgornji, spodnji in srednji - in vsako datoteko shraniti posebej. Všečkaj to:

Zgornji del okvirja

Spodnji del okvirja

Sredina okvirja

Naredili bomo ozadje s sliko sredine okvirja, ki se ponavlja vzdolž osi. Y medtem ko se zgornji in spodnji del okvirja ne bosta podvojila. Elementu dodajmo vsa tri ozadja in zapišimo tudi druge potrebne sloge:

Okvir (slika v ozadju: url (https://goo.gl/tKyzHt), / * vrh okvirja * / url (https://goo.gl/SUKymM), / * spodnji del okvirja * / url (https: //goo.gl/Km7HVV); / * sredina obrobe * / položaj ozadja: sredinski vrh, / * položaj vrha obrobe * / sredinski spodnji del, / * položaj dna obrobe * / sredinski vrh; / * položaj sredine obrobe * / ozadje - ponovitev: brez ponovitve, / * vrh okvirja se ne ponovi * / brez ponovitve, / * spodnji del okvirja se ne ponovi * / ponovi-y; / * sredina okvirja se ponovi navpično * / velikost ozadja: vsebuje; / * tukaj imajo vsa ozadja enako vrednost * / višina: auto; / * višina bloka je odvisna od količine vsebine * / širina: 400px; / * širina bloka je fiksno * / padding: 30px; / * blok padding * /)

Vsako ozadje mora biti ločeno z vejico in šele za zadnjim je podpičje, ki označuje konec deklaracije. Za udobje in boljšo berljivost kode priporočamo, da vsak URL navedete v novi vrstici.

Slike ozadja so razporejene v plasteh – ena pod drugo. Prvo določeno ozadje bo v zgornjem sloju, drugo ozadje bo pod prvim, tretje pa pod prvima dvema. Zato smo sliko s sredino okvirja postavili čisto na konec – da se ne prekriva z zgornjim in spodnjim delom.

Nato v kodi nastavimo lastnosti položaja ozadja in ponovitve ozadja za vsako ozadje (po istem vrstnem redu kot slike ozadja). Da, prav ste uganili: če je to potrebno, lahko določite vrednosti drugih lastnosti ozadja, ločene z vejicami. In če morate za vsa ozadja uporabiti eno vrednost, jo zapišete kot običajno (v našem primeru je to lastnost size-size: contain).

No, pa poglejmo rezultat:

Kot lahko vidite, je okvir pravilno nameščen in zdaj lepo uokvirja vsebino bloka. Kaj se zgodi, če povečamo količino besedila v bloku? Gledamo:

Srednji del našega okvirja smo navpično podvojili zahtevano število krat, kot da bi se raztegnili po dolžini in prilagodili besedilu. To je učinek, ki ne bi bil mogoč, če bi uporabili eno sliko. Za jasnost dodajmo še več besedila:

Seveda lahko več ozadij uporabimo tudi za druge namene. Prikazali smo le en primer od mnogih. Poskusite si predstavljati svojo situacijo in vadite uporabo skupine ozadja.

Uporaba skrajšanega zapisa

Lastnost ozadja sprejema tudi več vrednosti. V primeru uporabe več ozadij je lahko skrajšana oznaka veliko bolj priročna, saj se v njej težje zmedemo. Prepišimo našo kodo za okvir:

Ozadje: url (https://goo.gl/tKyzHt) sredinsko zgoraj / ne vsebuje ponovitev, / * vrh okvirja * / url (https://goo.gl/SUKymM) sredinsko spodaj / ne vsebuje ponovitev, / * spodnji del okvirja * / url (https://goo.gl/Km7HVV) center zgoraj / vsebuje repeat-y; / * sredina okvirja * /

Ta možnost je videti manj okorna in lažje razumljiva.

Naloga

Dodajte dve sliki ozadja za blok z uporabo CSS3.

Rešitev

Sodobni brskalniki omogočajo, da elementu dodate poljubno število slik ozadja, pri čemer navedete možnosti za vsako ozadje, ločene z vejicami. Dovolj je, da uporabite univerzalno lastnost ozadje in zanj najprej določite eno ozadje, drugo pa ločeno z vejicami.

Kot primer razmislite o ustvarjanju navpičnih dekorativnih linij levo in desno od bloka. Za to bomo najprej pripravili slike, ki jih je treba ponoviti navpično brez šivov. Na sl. 1 prikazuje sliko ozadja, ki bo prikazana ob levem robu, na sl. 2 sliki za prikaz na desni.

riž. 1. Slika ozadja za obrobo na levi

riž. 2. Slika ozadja za obrobo na desni

Kot blok element, ki mu je dodano ozadje, se običajno uporablja oznaka

zaradi njegove priročnosti in vsestranskosti, da bi ga ločili od ostalih elementov, mu je dodan razred blokov (primer 1).

Primer 1. Dve sliki ozadja

HTML5 CSS3 IE Cr Op Sa Fx

Dve sliki ozadja

V 11 mesecih opazovanja so radijski operaterji izvedli 8642 komunikacijskih sej s skupnim obsegom 300625 skupin. To so samo meteo in zračni telegrami. Prejeto od radijske postaje Cape Chelyuskin 7450 skupin.

Rezultat tega primera je prikazan na sl. 3.

). Danes bomo govorili še o eni zanimivi funkciji - uporabi več slik v ozadju.

Sestava ozadij

Obstaja veliko razlogov, zakaj boste na splošno morda morali sestaviti več slik v ozadju, med katerimi so najpomembnejši:

prihranek prometa na velikosti slik, če posamezne slike skupaj tehtajo manj kot slika s sploščenimi plastmi, in
potreba po neodvisnem obnašanju posameznih slojev, na primer pri izvajanju učinkov paralakse.

Morda so drugi razumni razlogi :)

Klasičen pristop

Torej moramo postaviti več slik ozadja eno nad drugo. Kako se ta naloga običajno rešuje? Zelo preprosto je: za vsako sliko ozadja se ustvari blok, ki mu je dodeljena ustrezna slika ozadja. Bloki so bodisi ugnezdeni drug v drugem ali postavljeni v vrsto z ustreznimi pravili pozicioniranja. Tukaj je preprost primer:

Blok z razredom "ribolov" znotraj "sirena" samo za demonstracijske namene.

Zdaj nekaj stilov:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (višina: 300px; širina: 480px; položaj: relativna;) .sample1 .sea (ozadje: url (media / sea.png) repeat-x zgoraj levo;) .sample1 .mermaid (ozadje: url (media / mermaid.svg) repeat-x spodaj levo;) .sample1 .fish (ozadje: url (media / fish.svg) brez ponovitve; višina: 70px; širina: 100px; levo : 30px; zgoraj: 90px; položaj: absolutno;) .sample1 .fishing (ozadje: url (media / fishing.svg) brez ponovitve zgoraj desno 10px;)

rezultat:

V tem primeru so tri ugnezdena ozadja in en blok z ribami, ki se nahaja poleg blokov "ozadja". Teoretično je mogoče ribe premikati, na primer z uporabo JavaScript ali CSS3 prehodov / animacij.

Mimogrede, ta primer uporablja novo sintakso pozicioniranja v ozadju za ".fishing", definirano tudi v CSS3:
ozadje: url (media / fishing.svg) brez ponovitve zgoraj desno 10px;
Trenutno je podprt v IE9 + in Opera 11+, ni pa podprt v Firefoxu 10 in Chromu 16. Tako uporabniki zadnjih dveh brskanj še ne bodo mogli ujeti ribe.

Več ozadij

Na pomoč priskoči nova funkcija, dodana v CSS3 – zmožnost definiranja več slik ozadja za en element hkrati. Izgleda takole:

In ustrezni slogi:
.sample2 .sea (višina: 300px; širina: 480px; položaj: relativna; slika ozadja: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / sea. png "); položaj ozadja: zgoraj desno 10px, spodaj levo, zgoraj levo; background-repeat: brez ponovitve, repeat-x, repeat-x;) .sample2 .fish (ozadje: url (" media / fish.svg ") brez ponovitve; višina: 70px; širina: 100px; levo: 30px; zgoraj: 90px; položaj: absolutno;)
Če želite definirati več slik, morate uporabiti pravilo za sliko ozadja, ki navaja posamezne slike, ločene z vejicami. Dodatna pravila, tudi seznam, se lahko uporabijo za nastavitev položaja, ponovitev in drugih parametrov za vsako od slik. Bodite pozorni na vrstni red, v katerem so slike navedene: plasti so navedene od leve proti desni od vrha do dna.

Rezultat je popolnoma enak:

Eno pravilo

Če rib ni treba izbrati v ločenem bloku za nadaljnje manipulacije, lahko celotno sliko prepišete z enim preprostim pravilom:

Slogi:
.sample3 .sea (višina: 300px; širina: 480px; položaj: relativna; slika ozadja: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), url (" media / sea.png "); položaj ozadja: zgoraj desno 10px, spodaj levo, 30px 90px, zgoraj levo; background-repeat: no-repeat, repeat-x;)

Ne bom dal slike z rezultatom - verjemite mi, sovpada z zgornjima slikama. Toda spet bodite pozorni na sloge, zlasti na "background-repeat" - v skladu s specifikacijo, če manjka del seznama na koncu, mora brskalnik navedeni seznam ponoviti tolikokrat, kot je potrebno, da se ujema s številko. slik na seznamu.

V tem primeru je enakovreden temu opisu:
ponovitev v ozadju: brez ponovitve, ponovitev-x, brez ponovitve, ponovitve-x;

Še krajše

Če se spomnite CSS 2.1, opredeljuje zmožnost opisovanja slik ozadja na jedrnat način. Kaj pa več slik? Možno je tudi:

Sample4 .sea (višina: 300px; širina: 480px; položaj: relativna; ozadje: url ("media / fishing.svg") zgoraj desno 10px brez ponovitve, url ("media / mermaid.svg") spodaj levo repeat-x , url ("media / fish.svg") 30px 90px brez ponovitve, url ("media/sea.png") repeat-x;)

Vendar upoštevajte, da zdaj ne morete preprosto preskočiti vrednosti (razen če sovpadajo s privzeto). Mimogrede, če želite nastaviti barvo slike ozadja, morate to storiti v zadnji plasti.

Dinamične slike

Če je sestava statična ali dinamična le odvisno od velikosti vsebnika, potem več ozadij očitno poenostavi oblikovanje strani. Kaj pa, če morate s posameznimi elementi kompozicije delati neodvisno od javascripta (premikanje, pomikanje itd.)?

Mimogrede, tukaj je primer iz resničnega življenja - tema z regratom v Yandexu:

Če se poglobite v kodo, boste videli nekaj takega:

...

Bloki z razredi "b-fluff-bg", "b-fluff__cloud" in "b-fluff__item" vsebujejo slike ozadja, ki se med seboj prekrivajo. Poleg tega se ozadje z oblaki nenehno pomika in regrat letijo po zaslonu.
Ali je to mogoče prepisati z več ozadji? Načeloma da, vendar pod pogojem 1) podporo za to funkcijo v ciljnih brskalnikih in ... 2) branje naprej;)

Kako dodam zvočnike v več ozadij? V takšni situaciji se izkaže za priročno, da brskalnik v notranjem pogledu razprši posamezne parametre slike ozadja po ustreznih pravilih. Na primer, za pozicioniranje obstaja "položaj ozadja", za odmike pa ga morate samo spremeniti. Vendar pa je uporaba več slik zaračunana – to pravilo (in katero koli podobno pravilo) mora navesti položaj za vsa ozadja, nastavljena za vaš blok, in tega ne morete narediti selektivno.

Če želite našemu ozadju z ribami dodati animacijo, lahko uporabite naslednjo kodo:
$ (dokument) .pripravljen (funkcija () (var sea = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; funkcija animacija Loop () (ribeY = 90 + Math.thor (30 * Math.sin (t ++ / 180.0)); če (- ribeX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) morska deklicaX = 0; ribeY = -10 + (10 * Math.cos (t * 0,091)); ribaX = 10 + (5 * Math.sin (t * 0,07)); sea.style.backgroundPosition = "zgoraj" + fishY + "px desno" + fishX + "px," + mermaidX + "px spodaj," + fishesX + "px" + fishesY + "px, zgoraj levo"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
kje
window.requestAnimFrame = (funkcija () (vrnitev window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funkcija (povratni klic));) (60 ); );

In mimogrede, animacije se lahko izvajajo tudi prek CSS3 Transitions / Animations, vendar je to tema za ločeno razpravo.

Paralaksa in interaktivnost

Končno, s podobnimi manevri lahko preprosto dodate učinke paralakse ali interaktivno interakcijo z ozadjem:

V takšnih scenarijih pride prav več slik ozadja, saj medtem ko govorimo samo o ozadju (in ne o vsebini), vam njihova uporaba omogoča, da se izognete neredu vaše html kode in DOM-a. Toda vse ima svojo ceno: do posameznih elementov kompozicije ne morem dostopati po imenu, ID-ju, razredu ali katerem koli drugem parametru. Jasno si moram zapomniti vrstni red elementov v sestavi v kodi in za vsako spremembo katerega koli parametra katerega koli elementa moram pravzaprav prilepiti vrstico, ki opisuje vrednosti tega parametra za vse elemente, in jo posodobiti za celotno sestavo.

Sea.style.backgroundPosition = "zgoraj" + fishY + "px desno" + fishX + "px," + mermaidX + "px spodaj," + fishesX + "px" + fishesY + "px, zgoraj levo";

Prepričan sem, da je to mogoče zaviti v priročno javascript kodo, ki bo prevzela virtualizacijo odnosov s posameznimi plastmi, hkrati pa pustila html-kodo strani čim bolj čisto.

Kaj je z združljivostjo?

Vse sodobne različice priljubljenih brskalnikov, vključno z IE9 +, podpirajo več slik (preverite lahko na primer s caniuse).

Modernizr lahko uporabite tudi za zagotavljanje alternativ brskalnikom, ki ne podpirajo več ozadij. Kot je Chris Coyier zapisal v svoji opombi o vrstnem redu slojev pri uporabi več ozadij, naredite nekaj takega:

Multiplebgs body (/ * Čudovito več BG deklaracij, ki presegajo resničnost in imsources piščance * /) .no-multiplebgs body (/ * laaaaaame rezervni del * /)
Če ste zmedeni glede uporabe JS za zagotavljanje združljivosti nazaj, lahko ozadje preprosto deklarirate dvakrat, vendar ima to tudi svoje pomanjkljivosti v obliki možnega dvojnega nalaganja virov (to je odvisno od izvedbe obdelave css v določenem brskalniku):

/ * več nadomestnih bg * / ozadje: # 000 url (...) ...; / * Čudovite številne izjave BG, ki presegajo resničnost in izvirne piščance * / url ozadja (...), url (...), url (...), # 000 url (...);

Če ste že začeli razmišljati o sistemu Windows 8, ne pozabite, da lahko pri razvoju aplikacij v slogu metroja uporabite več ozadij, saj se interno uporablja isti motor kot v IE10.

P.s. Na temo: Ne morem si pomagati, da se ne spomnim fenomenalnega članka o

Z eno lastnostjo ozadja lahko enemu elementu hkrati dodate več slik ozadja. To vam omogoča, da z enim elementom ustvarite zapleteno ozadje ali eno sliko, ki jo večkrat prikažete z različnimi nastavitvami. Vse slike s svojimi parametri so navedene ločene z vejicami, hkrati pa je prva prikazana slika, ki je prikazana na vrhu ostalih slik, zadnja pa je najnižja slika. Primer 1 prikazuje, kako ustvariti ozadje s tremi slikami.

Primer 1. Tri ozadja

Ozadje

Če morate ločeno nastaviti neko lastnost sloga za ozadje, na primer velikost ozadja kot v zgornjem primeru, so parametri za vsako ozadje navedeni ločeni z vejicami. Rezultat tega primera je prikazan na sl. 1.

riž. 1. Ozadje s tremi slikami

Ločene slike za ozadje vam omogočajo, da spremenite njihov položaj, pa tudi animirate, kot je prikazano v primeru 2.

Primer 2. Animirano ozadje

Ozadje

Zdaj pa razmislimo, kako uporabiti eno sliko za ustvarjanje bloka z okvirjem (slika 2). Širina bloka je fiksna, višina pa se razteza glede na obseg vsebine bloka.

riž. 2. Ročno narisan okvir

Slika jasno prikazuje zgornji in spodnji del, ki ju je treba izrezati v grafičnem urejevalniku in postaviti vodoravno. Srednji del je izbran tako, da se ponavlja navpično brez šivov. Slika ima izrazit ponavljajoč se vzorec, zato pri izbiri ne bi smelo biti težav. Kot rezultat boste dobili tako pripravljeno sliko (slika 3). Karirasto polje označuje preglednost, omogoča vam, da nastavite barvno ozadje skupaj s slikami in ga preprosto spremenite s slogi.

riž. 3. Pripravljeno za sliko ozadja

Samo ozadje je prikazano z lastnostjo background, nastavi tudi koordinate želenega fragmenta. Parametri vsakega ozadja so navedeni ločeni z vejicami in v tem primeru je pomemben njihov vrstni red. Želimo, da se zgornji in spodnji del bloka ne prekrivata, zato ju postavimo najprej (primer 3). Barva ozadja je določena zadnja.

Primer 3. Več slik ozadja

Ozadje

Huitzilopochtli - "čarovnik kolibrijev", bog vojne in sonca.

Tezcatlipoca - "kadilno ogledalo", glavni bog Aztekov.

Obema bogovom so bile podane človeške žrtve.

Prvo ozadje nariše zgornjo obrobo škatle, drugo ozadje nariše spodnjo, tretje pa navpične obrobe. Zadnja je barva, ki je vidna v prosojnem osrednjem delu bloka (slika 4).

). Danes bomo govorili še o eni zanimivi funkciji - uporabi več slik v ozadju.

Sestava ozadij

Obstaja veliko razlogov, zakaj boste na splošno morda morali sestaviti več slik v ozadju, med katerimi so najpomembnejši:

prihranek prometa na velikosti slik, če posamezne slike skupaj tehtajo manj kot slika s sploščenimi plastmi, in
potreba po neodvisnem obnašanju posameznih slojev, na primer pri izvajanju učinkov paralakse.

Morda so drugi razumni razlogi :)

Klasičen pristop

Blok z razredom "ribolov" znotraj "sirena" samo za demonstracijske namene.

rezultat:

V tem primeru so tri ugnezdena ozadja in en blok z ribami, ki se nahaja poleg blokov "ozadja". Teoretično je mogoče ribe premikati, na primer z uporabo JavaScript ali CSS3 prehodov / animacij.

Več ozadij

Na pomoč priskoči nova funkcija, dodana v CSS3 – zmožnost definiranja več slik ozadja za en element hkrati. Izgleda takole:

Rezultat je popolnoma enak:

Eno pravilo

Če rib ni treba izbrati v ločenem bloku za nadaljnje manipulacije, lahko celotno sliko prepišete z enim preprostim pravilom:

V tem primeru je enakovreden temu opisu:
ponovitev v ozadju: brez ponovitve, ponovitev-x, brez ponovitve, ponovitve-x;

Še krajše

Če se spomnite CSS 2.1, opredeljuje zmožnost opisovanja slik ozadja na jedrnat način. Kaj pa več slik? Možno je tudi:

Vendar upoštevajte, da zdaj ne morete preprosto preskočiti vrednosti (razen če sovpadajo s privzeto). Mimogrede, če želite nastaviti barvo slike ozadja, morate to storiti v zadnji plasti.

Dinamične slike

Mimogrede, tukaj je primer iz resničnega življenja - tema z regratom v Yandexu:

Če se poglobite v kodo, boste videli nekaj takega:

...

Bloki z razredi "b-fluff-bg", "b-fluff__cloud" in "b-fluff__item" vsebujejo slike ozadja, ki se med seboj prekrivajo. Poleg tega se ozadje z oblaki nenehno pomika in regrat letijo po zaslonu.
Ali je to mogoče prepisati z več ozadji? Načeloma da, vendar pod pogojem 1) podporo za to funkcijo v ciljnih brskalnikih in ... 2) branje naprej;)

In mimogrede, animacije se lahko izvajajo tudi prek CSS3 Transitions / Animations, vendar je to tema za ločeno razpravo.

Paralaksa in interaktivnost

Končno, s podobnimi manevri lahko preprosto dodate učinke paralakse ali interaktivno interakcijo z ozadjem:

Sea.style.backgroundPosition = "zgoraj" + fishY + "px desno" + fishX + "px," + mermaidX + "px spodaj," + fishesX + "px" + fishesY + "px, zgoraj levo";

Prepričan sem, da je to mogoče zaviti v priročno javascript kodo, ki bo prevzela virtualizacijo odnosov s posameznimi plastmi, hkrati pa pustila html-kodo strani čim bolj čisto.

Kaj je z združljivostjo?

Vse sodobne različice priljubljenih brskalnikov, vključno z IE9 +, podpirajo več slik (preverite lahko na primer s caniuse).

/ * več nadomestnih bg * / ozadje: # 000 url (...) ...; / * Čudovite številne izjave BG, ki presegajo resničnost in izvirne piščance * / url ozadja (...), url (...), url (...), # 000 url (...);

Če ste že začeli razmišljati o sistemu Windows 8, ne pozabite, da lahko pri razvoju aplikacij v slogu metroja uporabite več ozadij, saj se interno uporablja isti motor kot v IE10.

P.s. Na temo: Ne morem si pomagati, da se ne spomnim fenomenalnega članka o.