Više pozadina u css3. Više pozadina pomoću CSS-a ili više pozadina

.

U CSS-u 2 nemoguće je dodati dvije pozadine jednom elementu u isto vrijeme, tako da morate ugniježditi jedan element u drugi i svakom dati vlastitu pozadinsku sliku. Za složeni rasporedi Ponekad je takvih investicija desetak. Jasno je da takvo gomilanje ne vodi ničemu dobrom, ali što učiniti? Ispostavilo se da postoji nešto! U CSS-u 3 možete dodati više pozadinskih slika bilo kojem elementu u isto vrijeme. Dakle, uzimamo crtež bloka (slika 1), izrezujemo ga na dijelove i počinjemo testirati u preglednicima.

Riža. 1. Blokirajte za stranicu

Radi jednostavnosti, uzet ću širinu bloka kao fiksnu veličinu, a visina će varirati ovisno o sadržaju. Gornji i donji dijelovi jasno su vidljivi na crtežu; izrezao sam ih u uređivaču i presavio u slojeve u zasebnoj datoteci. Srednji dio mora biti odabran tako da se ponavlja okomito bez šavova. Dizajn ima dobro definiran ponavljajući uzorak, tako da ne bi trebalo biti poteškoća u njegovom isticanju. Kopiram i zalijepim na prethodne fragmente. Rezultat će biti ovakva slika (slika 2).

Riža. 2. Pripremljene slike

U principu, svaki fragment možete spremiti kao zasebna datoteka, no CSS spriteovi (tzv. tehnologija lijepljenja više slika u jednu) imaju niz prednosti. Kao prvo, smanjuje se broj zahtjeva prema poslužitelju zbog smanjenja broja datoteka i, kao drugo, slike se ukupno brže učitavaju i prikazuju.

Samu pozadinu prikazuje svojstvo background, koje također specificira koordinate željenog fragmenta. Parametri svake pozadine navedeni su odvojeni zarezima, au ovom slučaju bitan je njihov redoslijed. Želim da se gornji i donji dio bloka ne preklapaju, pa ih stavljam na prvo mjesto (primjer 1).

Primjer 1. Nekoliko pozadinskih slika

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

Prva pozadina prikazuje gornju granicu bloka, druga pozadina - donju, a treća - okomite granice.

Provjeravamo u preglednicima. Internet Explorer 8 uopće nije prikazao nikakvu sliku, drugi preglednici (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) ispravno su prikazali okvir (Sl. 3).

Riža. 3. Prikaz okvira u pregledniku Safari

Korištenje više pozadina uvelike olakšava situaciju programerima, osobito kod postavljanja blokova. Ostala je još samo jedna sitnica. Potrebno je da preglednik IE 6–8 prestane postojati.

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

Sastav pozadine

Mnogo je razloga zašto biste uopće željeli sastaviti više slika u pozadini, od kojih su najvažniji:

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

Možda postoje i drugi razumni razlozi :)

Klasičan pristup

Stoga moramo postaviti nekoliko pozadinskih slika jednu na drugu. Kako se ovaj problem obično rješava? Vrlo je jednostavno: za svaku pozadinsku sliku stvara se blok kojemu se dodjeljuje odgovarajuća pozadinska slika. Blokovi su ili ugniježđeni jedan u drugi ili postavljeni u niz s odgovarajućim pravilima pozicioniranja. Evo jednostavnog primjera:

Blok s klasom "pecanje" unutar "sirena" samo je u svrhu demonstracije.

Sada nekoliko stilova:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (visina:300px; širina:480px; položaj: relativan; ) .sample1 .sea (pozadina: url(media/sea.png) repeat-x gore lijevo; ) .sample1 .mermaid ( pozadina: url(media/mermaid.svg) repeat-x dolje lijevo; ) .sample1 .fish ( pozadina: url(media/fish.svg) no-repeat; visina:70px; širina:100px; lijevo : 30px; gore: 90px; pozicija: 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 ribama koji se nalazi pored blokova "pozadine". U teoriji, riba se može pomicati, na primjer, pomoću JavaScripta ili CSS3 prijelaza/animacija.

Usput, ovaj primjer za ".fishing" koristi novu sintaksu za pozadinsko pozicioniranje, 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. Stoga korisnici posljednja dva preglednika još neće moći loviti ribu.

Više pozadina

Nova opcija dodana u CSS3 dolazi u pomoć - mogućnost definiranja više pozadinskih slika za jedan element. Ovako izgleda:

I odgovarajući stilovi:
.uzorak2 .more (visina:300px; širina:480px; položaj: relativan; pozadinska slika: url("media/fishing.svg"), url("media/sirena.svg"), url("media/more. png"); položaj pozadine: gore desno 10px, dolje lijevo, gore lijevo; pozadinsko ponavljanje: bez ponavljanja, ponavljanje-x, ponavljanje-x ; ) .sample2 .fish ( pozadina: url("media/fish.svg) ") bez ponavljanja; visina:70px; širina:100px; lijevo: 30px; gore: 90px; pozicija: apsolutna; )
Za definiranje više slika, morate koristiti pravilo pozadinske slike, navodeći pojedinačne slike odvojene zarezima. Dodatna pravila, također popis, mogu postaviti položaj, ponavljanja i druge parametre za svaku sliku. Obratite pažnju na redoslijed kojim su slike navedene: slojevi su navedeni slijeva nadesno od najvišeg do najnižeg.

Rezultat je potpuno isti:

Jedno pravilo

Ako ribu nije potrebno odvojiti u zaseban blok za naknadne manipulacije, cijela se slika može prepisati jednim jednostavnim pravilom:

Stilovi:
.uzorak3 .more (visina:300px; širina:480px; položaj: relativan; pozadinska slika: url("media/fishing.svg"), url("media/sirena.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 pokazati sliku rezultata - vjerujte mi, poklapa se s dvije gornje slike. Ali opet obratite pozornost na stilove, posebno na "pozadinsko ponavljanje" - prema specifikaciji, ako dio popisa na kraju nedostaje, preglednik mora ponoviti navedeni popis potreban broj puta kako bi odgovarao broju slika u popisu.

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

Još kraće

Ako se sjećate CSS 2.1, on je definirao mogućnost opisa pozadinskih slika u kratkom obliku. Što kažete na više slika? Ovo je također 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 ponavljanje-x , url("media/fish.svg") 30px 90px bez ponavljanja, url("media/sea.png") repeat-x; )

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

Dinamične slike

Ako je kompozicija statična ili najviše dinamična ovisno o veličini spremnika, tada višestruke pozadine očito pojednostavljuju dizajn stranice. Ali što ako trebate raditi s pojedinačnim elementima kompozicije neovisno o javascriptu (pomicanje, pomicanje, itd.)?

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


Ako pogledate 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 stalno se pomiče, a maslačci lete po ekranu.

Može li se ovo prepisati pomoću više pozadina? U načelu, da, ali podložno 1) podršci za ovu značajku u ciljanim preglednicima i... 2) čitajte dalje;)

Kako dodati dinamiku višestrukim pozadinama? U takvoj situaciji ispada prikladno da u unutarnjem prikazu preglednik distribuira pojedinačne parametre pozadinskih slika prema odgovarajućim pravilima. Na primjer, za pozicioniranje postoji “background-position”, a za pomake je dovoljno promijeniti samo ovo. Međutim, postoji cijena za korištenje više slika - ovo pravilo (i svako slično) zahtijeva da navedete položaj za sve pozadine definirane za vaš blok, a to ne možete učiniti selektivno.

Da biste dodali animaciju našoj ribljoj pozadini, možete koristiti sljedeći kod:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var sirenaX = 0; var t = 0; funkcija animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 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 = "top " + fishY + "px desno " + fishX + "px, " + sirenaX + "px bottom," + fishesX + "px " + fishesY + "px, gore lijevo"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Gdje
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60) ); )); ))();

I usput, animacije se također mogu raditi pomoću CSS3 Transitions/Animations, ali to je tema za zasebnu raspravu.

Paralaksa i interaktivnost

Konačno, slični manevri mogu lako dodati efekte paralakse ili interaktivnu interakciju s pozadinom:

Višestruke pozadinske slike korisne su u takvim scenarijima, budući da dok govorimo samo o pozadini (a ne o sadržaju), njihova nam upotreba omogućuje izbjegavanje zatrpavanja html koda i DOM-a. Ali sve ima svoju cijenu: ne mogu pristupiti pojedinačnim elementima kompozicije prema imenu, ID-u, klasi ili bilo kojem drugom parametru. Moram eksplicitno zapamtiti redoslijed elemenata u sastavu u kodu, i 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 = "top " + fishY + "px desno " + fishX + "px, " + sirenaX + "px bottom," + fishesX + "px " + fishesY + "px, gore lijevo";

Siguran sam da se to može upakirati u zgodan javascript kod, koji će se pobrinuti za virtualizaciju odnosa s pojedinim slojevima, a html kod stranice ostaviti što čišćim.

Što je s kompatibilnošću?

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

Također možete koristiti Modernizr za pružanje alternativnih rješenja za preglednike koji ne podržavaju više pozadina. Kao što je Chris Coyier napisao u svom postu o redoslijedu slojeva kada koristite više pozadina, učinite nešto ovako:

Multiplebgs body ( /* Fenomenalne višestruke BG deklaracije koje nadilaze stvarnost i imsourcess cure */ ) .no-multiplebgs body ( /* laaaaaame backback */ )
Ako ste zabrinuti oko korištenja JS-a za pružanje kompatibilnosti unatrag, možete jednostavno dvaput deklarirati pozadinu, iako 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še bg backback */ pozadina: #000 url(...) ...; /* Sjajne višestruke BG deklaracije koje nadilaze stvarnost i imsourcess cure */ 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 kada razvijate aplikacije u metro stilu, jer koristi isti mehanizam kao IE10.

P.s. O temi: Ne mogu ne sjetiti se fenomenalnog članka o

Zadatak

Dodajte dvije pozadinske slike za blok s koristeći CSS 3.

Riješenje

Moderni preglednici omogućuju dodavanje proizvoljnog broja pozadinskih slika elementu, navodeći parametre svake pozadine odvojene zarezima. Dovoljno je koristiti svojstvo univerzalne pozadine i za nju prvo odrediti jednu pozadinu, a drugu odvojenu zarezom.

Na primjer, razmislite o stvaranju okomitih ukrasnih linija lijevo i desno od bloka. Da biste to učinili, najprije pripremite slike koje treba ponoviti okomito bez zglobova. Na sl. 1 prikazuje pozadinsku sliku, koja će biti prikazana na lijevom rubu, a na sl. 2 slika za prikaz na desnom rubu.

Riža. 1. Pozadinska slika za rub s lijeve strane

Riža. 2. Pozadinska slika za obrub s desne strane

Element bloka kojem se dodaje pozadina obično je oznaka