Dvostruka pozadina. Kako napraviti više CSS pozadinskih slika. Primjer koda: više slika za pozadinu

Kada smo govorili o svojstvu background-image na početku ovog odjeljka, nismo spomenuli jednu stvar: u CSS3, možete dodati više pozadina za jedan element jednostavnim navođenjem odvojenih zarezima. Ovo je posebno korisno kada element s pozadinom ima promjenjivu širinu ili visinu, a pozadina se mora prilagoditi svojoj veličini.

Kako postaviti više pozadina u CSS-u

Pokazat ćemo vam primjer koji bi mogao dobro doći u praksi. Zamislimo da blok teksta trebamo postaviti u okvir. Okvir je grafička datoteka u PNG formatu:

U ovom zadatku ne znamo visinu teksta – ne znamo hoće li se tekst u potpunosti uklopiti u okvir ili će izaći izvan njegovih granica. Zbog ove nepoznate vrijednosti ne možemo riskirati korištenje originalnog crteža okvira kao pozadine. Ali s CSS-om možemo prisiliti ovu granicu da se produži prema potrebi. Da biste to učinili, morat ćete podijeliti izvorni crtež u grafičkom uređivaču na tri dijela - gornji, donji i srednji - i spremiti svaku datoteku zasebno. Kao ovo:

Vrh okvira

Donji dio okvira

Sredina okvira

Napravit ćemo pozadinu sa slikom sredine okvira koja se ponavlja duž osi. Y dok gornji i donji dio okvira neće biti duplicirani. Dodajmo sve tri pozadine elementu, a također zapišimo ostale potrebne stilove:

Okvir (pozadinska slika: url (https://goo.gl/tKyzHt), / * vrh okvira * / url (https://goo.gl/SUKymM), / * dno okvira * / url (https: //goo.gl/Km7HVV); / * sredina obruba * / pozadinski položaj: središnji vrh, / * položaj vrha obruba * / središnji dno, / * položaj dna obruba * / središnji vrh; / * položaj sredine obruba * / pozadina - ponavljanje: bez ponavljanja, / * vrh okvira se ne ponavlja * / bez ponavljanja, / * donji dio okvira se ne ponavlja * / repeat-y; / * sredina okvira se ponavlja okomito * / background-size: contain; / * ovdje za sve pozadine imaju istu vrijednost * / visina: auto; / * visina bloka ovisi o količini sadržaja * / širina: 400px; / * širina bloka je fiksno * / padding: 30px; / * blok padding * /)

Svaka pozadina mora biti odvojena zarezom, a tek iza zadnje je točka-zarez, što označava kraj deklaracije. Radi praktičnosti i bolje čitljivosti koda, preporučujemo da svaki URL navedete u novom retku.

Pozadinske slike su raspoređene u slojevima - jedna ispod druge. Prva navedena pozadina bit će u gornjem sloju, druga pozadina će biti ispod prve, treća će biti ispod prva dva. Zato smo sliku sa sredinom okvira postavili na sam kraj – da se ne preklapa s gornjim i donjim dijelom.

Zatim u kodu postavljamo svojstva background-position i background-repeat za svaku pozadinu (slijedeći isti redoslijed kao i pozadinske slike). Da, dobro ste pogodili: ako je to potrebno, tada možete odrediti vrijednosti drugih svojstava pozadine, odvojene zarezima. A ako trebate primijeniti jednu vrijednost na sve pozadine, zapišite je kao i obično (u našem slučaju, ovo je svojstvo background-size: contain).

Pa, pogledajmo rezultat:

Kao što vidite, okvir je pravilno postavljen, a sada lijepo uokviruje sadržaj bloka. Što se događa ako povećamo količinu teksta u bloku? Mi gledamo:

Srednji dio našeg okvira dupliciran je okomito potreban broj puta, kao da se rasteže po dužini i prilagođava tekstu. To je učinak koji ne bi bio moguć da smo koristili sliku jednog okvira. Dodajmo još više teksta radi jasnoće:

Naravno, nekoliko pozadina može se koristiti i u druge svrhe. Pokazali smo samo jedan primjer od mnogih. Pokušajte zamisliti svoju situaciju i vježbajte korištenje pozadinske grupe.

Korištenje skraćenog zapisa

Svojstvo pozadine također prihvaća više vrijednosti. U slučaju korištenja nekoliko pozadina, skraćeni zapis može biti mnogo prikladniji, jer se u njemu teže zbuniti. Prepišimo naš kod za okvir:

Pozadina: url (https://goo.gl/tKyzHt) središnji vrh / ne sadrži ponavljanje, / * vrh okvira * / url (https://goo.gl/SUKymM) središnji donji dio / ne sadrži ponavljanje, / * donji dio okvira * / url (https://goo.gl/Km7HVV) središnji vrh / sadrži repeat-y; / * sredina okvira * /

Ova opcija izgleda manje glomazna i lakša za razumijevanje.

Zadatak

Dodajte dvije pozadinske slike za blok pomoću CSS3.

Riješenje

Moderni preglednici omogućuju dodavanje proizvoljnog broja pozadinskih slika elementu, navodeći opcije za svaku pozadinu, odvojene zarezima. Dovoljno je upotrijebiti univerzalno svojstvo background i navesti jednu pozadinu za nju prvo, a drugu odvojenu zarezima.

Kao primjer, razmislite o stvaranju okomitih ukrasnih linija lijevo i desno od bloka. Da bismo to učinili, prvo ćemo pripremiti slike koje se trebaju ponavljati okomito bez šavova. Na sl. 1 prikazuje pozadinsku sliku koja će biti prikazana uz lijevi rub, a na sl. 2 slike za prikaz na desnoj strani.

Riža. 1. Slika pozadine za obrub s lijeve strane

Riža. 2. Slika pozadine za obrub s desne strane

Kao blok element kojem se dodaje pozadina, obično se koristi oznaka

zbog njegove pogodnosti i svestranosti, kako bi se razlikovao od ostalih elemenata, dodaje mu se blok klasa (primjer 1).

Primjer 1. Dvije pozadinske slike

HTML5 CSS3 IE Cr Op Sa Fx

Dvije pozadinske slike

Tijekom 11 mjeseci promatranja, radiooperateri su proveli 8642 komunikacijske sesije s ukupnim volumenom od 300625 grupa. Ovo su samo meteogrami i telegrami iz zraka. Primljeno od radio stanice Cape Chelyuskin 7450 grupa.

Rezultat ovog primjera prikazan je na sl. 3.

). Danas ćemo malo govoriti o još jednoj zanimljivoj značajci - korištenju više slika u pozadini.

Sastav pozadina

Postoji mnogo razloga zašto ćete, općenito, možda trebati sastaviti nekoliko slika u pozadini, među njima su najvažniji:

ušteda prometa na veličini slika, ako su pojedinačne slike zajedno teže manje od slike sa spljoštenim slojevima, i
potreba za neovisnim ponašanjem pojedinih slojeva, na primjer, pri implementaciji paralaksnih učinaka.

Možda postoje i drugi razumni razlozi :)

Klasičan pristup

Dakle, moramo postaviti nekoliko pozadinskih slika jednu iznad druge. Kako se obično rješava ovaj zadatak? Vrlo je jednostavno: za svaku pozadinsku sliku stvara se blok i pripisuje mu se odgovarajuća pozadinska slika. Blokovi su ili ugniježđeni jedan unutar drugog ili postavljeni u red s odgovarajućim pravilima pozicioniranja. Evo jednostavnog primjera:

Blok s klasom "ribolov" unutar "sirena" samo u svrhu demonstracije.

Sada nekoliko stilova:
.sample1 .more, .sample1 .sirena, .sample1 .ribolov (visina: 300px; širina: 480px; položaj: relativna;) .sample1 .more (pozadina: url (medij / sea.png) repeat-x gore lijevo;) .sample1 .sirena (pozadina: url (media / mermaid.svg) repeat-x dolje lijevo;) .sample1 .fish (pozadina: url (media / fish.svg) bez ponavljanja; visina: 70px; širina: 100px; lijevo : 30px; gore: 90px; položaj: apsolutna;) .sample1 .fishing (pozadina: url (media / fishing.svg) bez ponavljanja gore desno 10px;)

Proizlaziti:

U ovom primjeru postoje tri ugniježđene pozadine i jedan blok s ribom, koji se nalazi pored blokova "pozadine". U teoriji, ribu se može pomicati, na primjer, pomoću JavaScripta ili CSS3 prijelaza / animacija.

Usput, ovaj primjer koristi novu sintaksu pozicioniranja u pozadini za ".fishing", također definiranu u CSS3:
pozadina: url (media / fishing.svg) bez ponavljanja gore desno 10px;
Trenutno je podržan u IE9 + i Operi 11+, ali nije podržan u Firefoxu 10 i Chromeu 16. Dakle, korisnici posljednja dva pregledavanja još neće moći uloviti ribu.

Više pozadina

Nova značajka dodana u CSS3 dolazi u pomoć - mogućnost definiranja više pozadinskih slika za jedan element odjednom. izgleda ovako:

I odgovarajući stilovi:
.sample2 .sea (visina: 300px; širina: 480px; položaj: relativna; background-image: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / sea. png "); background-position: gore desno 10px, dolje lijevo, gore lijevo; background-repeat: no-repeat, repeat-x, repeat-x;) .sample2 .fish (pozadina: url (" media / fish.svg ") bez ponavljanja; visina: 70px; širina: 100px; lijevo: 30px; vrh: 90px; položaj: apsolutna;)
Da biste definirali više slika, morate koristiti pravilo pozadinske slike, navodeći pojedinačne slike odvojene zarezima. Dodatna pravila, također popis, mogu se koristiti za postavljanje pozicioniranja, ponavljanja i drugih parametara za svaku od slika. Obratite pažnju na redoslijed kojim su slike navedene: slojevi su navedeni slijeva nadesno od vrha do kraja.

Rezultat je potpuno isti:

Jedno pravilo

Ako ribu nije potrebno odabrati u zasebnom bloku za naknadne manipulacije, cijela se slika može prepisati jednim jednostavnim pravilom:

Stilovi:
.sample3 .sea (visina: 300px; širina: 480px; pozicija: relativna; background-image: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), url (" media / sea.png "); background-position: gore desno 10px, dolje lijevo, 30px 90px, gore lijevo; background-repeat: no-repeat, repeat-x;)

Neću davati sliku s rezultatom - vjerujte, poklapa se s dvije slike iznad. Ali opet obratite pažnju na stilove, posebno na "background-repeat" - prema specifikaciji, ako nedostaje dio popisa na kraju, tada preglednik mora ponoviti navedeni popis onoliko puta koliko je potrebno da se podudara s brojem slika na popisu.

U ovom slučaju, to je ekvivalentno ovom opisu:
pozadinsko ponavljanje: bez ponavljanja, ponavljanje-x, bez ponavljanja, ponavljanja-x;

Čak i kraće

Ako se sjećate CSS 2.1, on definira mogućnost opisivanja pozadinskih slika na sažet način. Što kažete na više slika? Također je moguće:

Sample4 .sea (visina: 300px; širina: 480px; pozicija: relativna; pozadina: url ("media / fishing.svg") gore desno 10px bez ponavljanja, url ("media / mermaid.svg") dolje lijevo repeat-x , url ("media / fish.svg") 30px 90px bez ponavljanja, url ("media / sea.png") repeat-x;)

Ali imajte na umu da sada ne možete jednostavno preskočiti vrijednosti (osim ako se ne podudaraju sa zadanim). Usput, ako želite postaviti boju pozadinske slike, to morate učiniti u posljednjem sloju.

Dinamične slike

Ako je sastav statičan ili dinamičan ne više nego ovisno o veličini spremnika, tada više pozadina očito pojednostavljuje dizajn stranice. Ali što ako trebate raditi s pojedinim elementima kompozicije neovisno o javascriptu (pomicanje, pomicanje, itd.)?

Usput, evo primjera iz stvarnog života - tema s maslačkom u Yandexu:

Ako zadubite u kod, vidjet ćete nešto poput ovoga:

...

Blokovi s klasama "b-fluff-bg", "b-fluff__cloud" i "b-fluff__item" sadrže pozadinske slike koje se međusobno preklapaju. Štoviše, pozadina s oblacima neprestano se pomiče, a po ekranu lete maslačak.
Može li se ovo prepisati korištenjem više pozadina? U principu da, ali uz uvjet 1) podršku za ovu značajku u ciljanim preglednicima i ... 2) čitanje dalje;)

Kako mogu dodati zvučnike u više pozadina? U takvoj situaciji ispada zgodno da u internom prikazu preglednik raspršuje pojedinačne parametre pozadinske slike prema odgovarajućim pravilima. Na primjer, za pozicioniranje postoji "background-position", a za pomake samo ga trebate promijeniti. Međutim, postoji naknada za korištenje više slika - ovo pravilo (i svako slično pravilo) mora navesti poziciju za sve pozadine postavljene za vaš blok, a to ne možete činiti selektivno.

Za dodavanje animacije našoj pozadini s ribom, možete koristiti sljedeći kod:
$ (dokument) .spreman (funkcija () (var sea = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var sirenaX = 0; var t = 0; funkcija animationLoop () (ribeY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- ribeX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenaX = 0; ribaY = -10 + (10 * Math.cos (t * 0,091)); ribaX = 10 + (5 * Math.sin (t * 0,07)); sea.style.backgroundPosition = "gore" + fishY + "px desno" + fishX + "px," + mermaidX + "px dolje," + fishesX + "px" + fishesY + "px, gore lijevo"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
gdje
window.requestAnimFrame = (funkcija () (povrat window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funkcija (povratni poziv)); (60 ); );

A usput, animacije se mogu raditi i preko CSS3 Transitions/Animations, ali to je tema za posebnu raspravu.

Paralaksa i interaktivnost

Konačno, sličnim manevrima možete jednostavno dodati efekte paralakse ili interaktivnu interakciju s pozadinom:

Više pozadinskih slika dobro je u takvim scenarijima, budući da, iako govorimo samo o pozadini (a ne o sadržaju), njihova upotreba vam omogućuje da izbjegnete zatrpavanje vašeg html koda i DOM-a. Ali sve ima svoju cijenu: ne mogu pristupiti pojedinačnim elementima kompozicije po imenu, ID-u, klasi ili bilo kojem drugom parametru. Moram jasno zapamtiti redoslijed elemenata u sastavu u kodu, a za svaku promjenu bilo kojeg parametra bilo kojeg elementa, zapravo, moram zalijepiti redak koji opisuje vrijednosti ovog parametra za sve elemente i ažurirati ga za cijeli sastav.

Sea.style.backgroundPosition = "gore" + fishY + "px desno" + fishX + "px," + mermaidX + "px dolje," + fishesX + "px" + fishesY + "px, gore lijevo";

Siguran sam da se to može umotati u zgodan javascript kod koji će preuzeti virtualizaciju odnosa s pojedinim slojevima, a pritom ostaviti html-kod stranice što čistijim.

Što je s kompatibilnošću?

Sve moderne verzije popularnih preglednika, uključujući IE9 +, podržavaju više slika (možete provjeriti, na primjer, s caniuse).

Modernizr također možete koristiti za pružanje alternativa preglednicima koji ne podržavaju više pozadina. Kao što je Chris Coyier napisao u svojoj bilješci o redoslijedu slojeva kada koristite više pozadina, učinite nešto poput ovoga:

Multiplebgs tijelo (/ * Sjajne višestruke BG deklaracije koje nadilaze stvarnost i imsources chicks * /) .no-multiplebgs tijelo (/ * laaaaaame rezervni dio * /)
Ako ste zbunjeni korištenjem JS-a za kompatibilnost unatrag, možete jednostavno dvaput deklarirati pozadinu, međutim, to također ima svoje nedostatke u obliku mogućeg dvostrukog učitavanja resursa (ovo ovisi o implementaciji css obrade u određenom pregledniku):

/ * višestruki bg backback * / pozadina: # 000 url (...) ...; / * Sjajne višestruke BG deklaracije koje nadilaze stvarnost i imsources chicks * / pozadinski url (...), url (...), url (...), # 000 url (...);

Ako ste već počeli razmišljati o sustavu Windows 8, imajte na umu da možete koristiti više pozadina pri razvoju aplikacija u stilu metroa, budući da se interno koristi isti motor kao u IE10.

P.s. Na temu: Ne mogu se ne sjetiti fenomenalnog članka o

Nekoliko pozadinskih slika može se dodati jednom elementu odjednom kroz jedno svojstvo pozadine. To vam omogućuje da s jednim elementom napravite složenu pozadinu ili jednu sliku, prikazujući je nekoliko puta s različitim postavkama. Sve slike sa svojim parametrima navedene su odvojene zarezima, pritom je prva prikazana slika koja se prikazuje iznad ostalih slika, a posljednja je najniža slika. Primjer 1 pokazuje kako stvoriti pozadinu s tri slike.

Primjer 1. Tri pozadine

Pozadina

Ako trebate zasebno postaviti neko svojstvo stila za pozadinu, kao što je veličina pozadine kao u gornjem primjeru, tada su parametri za svaku pozadinu navedeni odvojeni zarezima. Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Pozadina s tri slike

Zasebne slike za pozadinu omogućuju vam promjenu njihovog položaja, kao i animiranje, kao što je prikazano u primjeru 2.

Primjer 2. Animirana pozadina

Pozadina

Razmotrimo sada kako pomoću jedne slike stvoriti blok s okvirom (slika 2). Širina bloka je fiksna, a visina se proteže ovisno o volumenu sadržaja bloka.

Riža. 2. Ručno nacrtani okvir

Na slici su jasno vidljivi gornji i donji dio, koji se moraju izrezati u grafičkom uređivaču i postaviti vodoravno. Srednji dio je odabran tako da se ponavlja okomito bez šavova. Slika ima izražen uzorak koji se ponavlja, tako da ne bi trebalo biti poteškoća s odabirom. Kao rezultat, dobit ćete tako pripremljenu sliku (slika 3). Karirani okvir označava prozirnost, omogućuje vam da postavite pozadinu u boji zajedno sa slikama i jednostavno je promijenite kroz stilove.

Riža. 3. Pripremljeno za pozadinsku sliku

Samu pozadinu prikazuje svojstvo background, također postavlja koordinate željenog fragmenta. Parametri svake pozadine navedeni su odvojeni zarezima, a u ovom slučaju bitan je njihov redoslijed. Želimo da se gornji i donji dio bloka ne preklapaju, pa ih stavljamo na prvo mjesto (primjer 3). Boja pozadine navedena je zadnja.

Primjer 3. Više pozadinskih slika

Pozadina

Huitzilopochtli - "čarobnjak kolibri", bog rata i sunca.

Tezcatlipoca - "ogledalo za pušenje", glavni bog Asteka.

Ljudske žrtve prinošene su oba boga.

Prva pozadina crta gornju granicu okvira, druga pozadina crta dno, a treća okomite granice. Posljednja je boja koja je vidljiva u prozirnom središnjem dijelu bloka (slika 4.).

). Danas ćemo malo govoriti o još jednoj zanimljivoj značajci - korištenju više slika u pozadini.

Sastav pozadina

Postoji mnogo razloga zašto ćete, općenito, možda trebati sastaviti nekoliko slika u pozadini, među njima su najvažniji:

ušteda prometa na veličini slika, ako su pojedinačne slike zajedno teže manje od slike sa spljoštenim slojevima, i
potreba za neovisnim ponašanjem pojedinih slojeva, na primjer, pri implementaciji paralaksnih učinaka.

Možda postoje i drugi razumni razlozi :)

Klasičan pristup

Blok s klasom "ribolov" unutar "sirena" samo u svrhu demonstracije.

Proizlaziti:

Više pozadina

Nova značajka dodana u CSS3 dolazi u pomoć - mogućnost definiranja više pozadinskih slika za jedan element odjednom. izgleda ovako:

Rezultat je potpuno isti:

Jedno pravilo

Ako ribu nije potrebno odabrati u zasebnom bloku za naknadne manipulacije, cijela se slika može prepisati jednim jednostavnim pravilom:

U ovom slučaju, to je ekvivalentno ovom opisu:
pozadinsko ponavljanje: bez ponavljanja, ponavljanje-x, bez ponavljanja, ponavljanja-x;

Čak i kraće

Ako se sjećate CSS 2.1, on definira mogućnost opisivanja pozadinskih slika na sažet način. Što kažete na više slika? Također je moguće:

Dinamične slike

Usput, evo primjera iz stvarnog života - tema s maslačkom u Yandexu:

Ako zadubite u kod, vidjet ćete nešto poput ovoga:

...

Blokovi s klasama "b-fluff-bg", "b-fluff__cloud" i "b-fluff__item" sadrže pozadinske slike koje se međusobno preklapaju. Štoviše, pozadina s oblacima neprestano se pomiče, a po ekranu lete maslačak.
Može li se ovo prepisati korištenjem više pozadina? U principu da, ali uz uvjet 1) podršku za ovu značajku u ciljanim preglednicima i ... 2) čitanje dalje;)

A usput, animacije se mogu raditi i preko CSS3 Transitions/Animations, ali to je tema za posebnu raspravu.

Paralaksa i interaktivnost

Konačno, sličnim manevrima možete jednostavno dodati efekte paralakse ili interaktivnu interakciju s pozadinom:

Sea.style.backgroundPosition = "gore" + fishY + "px desno" + fishX + "px," + mermaidX + "px dolje," + fishesX + "px" + fishesY + "px, gore lijevo";

Siguran sam da se to može umotati u zgodan javascript kod koji će preuzeti virtualizaciju odnosa s pojedinim slojevima, a pritom ostaviti html-kod stranice što čistijim.

Što je s kompatibilnošću?

Sve moderne verzije popularnih preglednika, uključujući IE9 +, podržavaju više slika (možete provjeriti, na primjer, s caniuse).

Ako ste već počeli razmišljati o sustavu Windows 8, imajte na umu da možete koristiti više pozadina pri razvoju aplikacija u stilu metroa, budući da se interno koristi isti motor kao u IE10.

P.s. Na temu: Ne mogu se ne sjetiti fenomenalnog članka o.