Smanjenje CSS pravila vezanih za pozadinu. Zašto se pozadinska slika ne prikazuje?

Možete dodati više pozadinskih slika jednom elementu odjednom kroz jedno svojstvo pozadine. Ovo vam omogućava da se snađete sa jednim elementom za stvaranje složena pozadina ili jednu sliku, prikazujući je nekoliko puta sa razne postavke. Sve slike sa svojim parametrima su navedene odvojene zarezima, pri čemu je slika koja se prikazuje iznad ostalih slika prva, odnosno poslednja, najniža slika. Primjer 1 pokazuje kako napraviti pozadinu sa tri slike.

Primjer 1. Tri pozadine

Ako trebate posebno 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.

Rice. 1. Pozadina sa tri slike

Pojedinačne pozadinske slike vam omogućavaju da promijenite njihov položaj i da ih animirate, kao što je prikazano u primjeru 2.

Primjer 2: Animirana pozadina

Razmotrimo sada kako koristiti jednu sliku za kreiranje bloka sa okvirom (slika 2). Širina bloka je fiksna, a visina varira u zavisnosti od zapremine sadržaja bloka.

Rice. 2. Ručno nacrtani okvir

Vrh i Donji dio, koji treba da se iseče grafički editor i postavite ga vodoravno. Srednji dio je odabran tako da se ponavlja okomito bez šavova. Slika ima naglašeni uzorak koji se ponavlja, tako da ne bi trebalo biti poteškoća da je istaknete. Rezultat će biti pripremljena slika (slika 3). Karirano polje označava transparentnost; omogućava vam da postavite pozadinu u boji zajedno sa slikama i lako je promijenite kroz stilove.

Rice. 3. Slika pripremljena za pozadinu

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

Primjer 3. Nekoliko pozadinske slike

Prva pozadina prikazuje gornju granicu bloka, druga pozadina - donju, a treća - okomite ivice. Posljednja je boja koja je vidljiva u providnom središnjem dijelu bloka (sl. 4).

• Tutorial

Već smo se dotakli mogućnosti modula CSS3 Backgrounds and Borders, gledajući rad sa sjenama (). Danas ćemo pričati malo o još jednom zanimljiva prilika- korištenje više slika u pozadini.

Kompozicija pozadine

Postoji mnogo razloga zašto biste možda željeli komponirati 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 pojedinačnih slojeva, na primjer, pri implementaciji paralaksnih efekata.

Možda postoje i drugi razumni razlozi :)

Klasičan pristup

Dakle, moramo postaviti nekoliko pozadinskih slika jednu na drugu. Kako se ovaj problem obično rješava? Vrlo jednostavno: za svaku pozadinska slika kreira 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 sa klasom "fishing" unutar "sirena" je samo u svrhu demonstracije.

Sada nekoliko stilova:
.sample1 .sea, .sample1 .sirena, .sample1 .fishing (visina:300px; širina:480px; pozicija: relativna; ) .sample1 .sea (pozadina: url(media/sea.png) repeat-x na vrhu 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; pozicija: apsolutna; ) .sample1 .fishing (pozadina: url(media/fishing.svg) bez ponavljanja gore desno 10px; )

rezultat:

IN u ovom primjeru tri ugniježđene pozadine i jedan blok sa ribama koji se nalaze pored blokova „pozadine“. U teoriji, ribe se mogu pomicati, na primjer, sa koristeći JavaScript ili CSS3 tranzicije/animacije.

Usput, ovaj primjer za ".fishing" koristi novu sintaksu za pozicioniranje u pozadini, 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. Tako da korisnici posljednja dva pretraživača još neće moći uhvatiti ribu.

Više pozadina

Dolazi u pomoć nova opcija, dodat u CSS3, je mogućnost definiranja više pozadinskih slika za jedan element. izgleda ovako:

I odgovarajući stilovi:
.sample2 .sea (visina:300px; širina:480px; pozicija: 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 ( background: url("media/fish.svg ") bez ponavljanja; visina:70px; širina:100px; lijevo: 30px; gore: 90px; pozicija: apsolutna; )
Da biste definirali više slika, morate koristiti pravilo pozadinske slike, navodeći pojedinačne slike odvojene zarezima. Dodatna pravila, takođe kao lista, možete postaviti pozicioniranje, ponavljanja i druge parametre za svaku sliku. Obratite pažnju na redosled kojim su slike navedene: slojevi su izlistani s leva na desno od vrha do kraja.

Rezultat je potpuno isti:

Jedno pravilo

Ako ribu nije potrebno odvajati u poseban blok za naknadne manipulacije, cijela slika se može prepisati jednim jednostavno pravilo:

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 ; )

Sliku rezultata neću pokazivati ​​- vjerujte mi, poklapa se sa dvije slike iznad. Ali opet obratite pažnju na stilove, posebno na „background-repeat“ - prema specifikaciji, ako nedostaje dio liste na kraju, pretraživač bi trebao ponoviti specificirana lista potreban broj puta da odgovara broju slika na listi.

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

Čak i kraće

Ako se sjećate CSS 2.1, definirao je mogućnost opisivanja pozadinskih slika u kratkom obliku. Šta 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 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 poklapaju sa zadanom vrijednošću). Usput, ako želite postaviti boju pozadinske slike, to morate učiniti u posljednjem sloju.

Dinamične slike

Ako je kompozicija statična ili dinamična najviše ovisno o veličini spremnika, tada više pozadina očigledno pojednostavljuje dizajn stranice. Ali šta ako trebate raditi sa pojedinačnim elementima kompozicije nezavisno od javascripta (pomeranje, pomeranje, itd.)?

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


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

...

Blokovi sa klasama "b-fluff-bg", "b-fluff__cloud" i "b-fluff__item" sadrže pozadinske slike koje se međusobno preklapaju. Štaviše, pozadina sa oblacima stalno se pomiče, a maslačak lete preko ekrana.

Može li se ovo prepisati korištenjem više pozadina? U principu da, ali podložno 1) podršci za ovu funkciju u ciljnim pretraživačima i... 2) čitanju dalje;)

Kako dodati dinamiku u više pozadina? U takvoj situaciji ispada zgodno da u internom predstavljanju pretraživač distribuira pojedinačne parametre pozadinskih slika prema odgovarajućim pravilima. Na primjer, za pozicioniranje postoji “background-position”, a za smjene je dovoljno promijeniti samo ovo. Međutim, postoji trošak za korištenje više slika - ovo pravilo (i svako slično) zahtijeva od vas da navedete poziciju za sve pozadine definirane za vaš blok, a to ne možete raditi selektivno.

Za dodavanje animacije našoj riblje 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 mermaidX = 0; var t = 0; funkcija animationLoop() (ribeY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenaX = 0; fishY = -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 = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) (wind.setTime,0000000) ); )); ))();

I usput, animacije se mogu raditi i pomoću CSS3 Transitions/Animations, ali ovo je tema za posebnu raspravu.

Paralaksa i interaktivnost

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

Višestruke pozadinske slike su korisne u takvim scenarijima, jer dok govorimo samo o pozadini (a ne o sadržaju), njihovo korištenje nam omogućava da izbjegnemo prljanje html koda i DOM-a. Ali sve ima svoju cijenu: ne mogu se obratiti pojedinačni elementi kompozicije po imenu, ID-u, klasi ili nekom drugom parametru. Moram eksplicitno zapamtiti redoslijed elemenata u kompoziciji u kodu, a za svaku promjenu bilo kojeg parametra bilo kojeg elementa, zapravo, moram zalijepiti red koji opisuje vrijednosti ovog parametra za sve elemente i ažurirati ga za celokupnu kompoziciju.

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

Siguran sam da se ovo može završiti pogodan kod u javascriptu, koji će preuzeti virtuelizaciju odnosa sa pojedinačnim slojevima, ostavljajući pritom html kod stranice što čistiji.

Šta je sa kompatibilnošću?

Sve moderne verzije popularni pretraživači, uključujući IE9+, podržavaju više slika (možete provjeriti, na primjer, sa caniuse).

Modernizr možete koristiti i za pružanje pretraživača koji ne podržavaju više pozadina alternativna rješenja. Kao što je Chris Coyier napisao u svom postu o redoslijedu slojeva kada koristite više pozadina, učinite nešto poput ovoga:

Multiplebgs body ( /* Sjajne višestruke BG deklaracije koje nadilaze stvarnost i imsources ribice */ ) .no-multiplebgs tijelo ( /* laaaaaame backback */ )
Ako ste zbunjeni korištenjem JS-a za pružanje kompatibilnost unatrag, možete jednostavno deklarirati pozadinu dvaput, međutim, ovo također ima svoje nedostatke u obliku mogućih dual boot resursi (ovo zavisi od implementacije css obrade u određenom pretraživaču):

/* višestruki bg backback */ background: #000 url(...) ...; /* Sjajne višestruke BG deklaracije koje prevazilaze stvarnost i imsources ribe */ background url(...), url(...), url(...), #000 url(...);

Ako ste već počeli razmišljati o Windows 8, imajte na umu da možete koristiti više pozadina kada razvijate aplikacije u stilu metroa, jer koristi isti mehanizam kao IE10.

P.s. Na temu: Ne mogu a da se ne sjetim fenomenalnog članka o .

Tagovi:

• css3
• više pozadina
• granice i pozadine

Dodaj oznake

U CSS 2, nemoguće je dodati dvije pozadine jednom elementu u isto vrijeme, tako da morate ugnijezditi jedan element unutar drugog i svakom dati svoju sliku pozadine. Za složene rasporede takvih priloga se ponekad može izbrojati na desetak. Jasno je da takvo gomilanje ne vodi ničemu dobrom, ali šta učiniti? Ispostavilo se da postoji nešto! U CSS 3 možete dodati više pozadinske slike za bilo koji element. Dakle, uzimamo blok crtež (slika 1), isečemo ga na komade i počinjemo da ga testiramo u pretraživačima.

Rice. 1. Blokirajte za stranicu

Radi jednostavnosti, uzet ću širinu bloka fiksna veličina, a visina će se protezati ovisno o sadržaju. Gornji i donji dio su jasno vidljivi na crtežu, izrezao sam ih u editoru i presavio u slojeve u zasebnom fajlu. Srednji dio mora biti odabran tako da se ponavlja okomito bez šavova. Dizajn ima dobro definiran obrazac koji se ponavlja, tako da ne bi trebalo biti poteškoća u njegovom naglašavanju. Kopiram i zalijepim na prethodne fragmente. Rezultat će biti ovakva slika (slika 2).

Rice. 2. Pripremljene slike

U principu, svaki fragment možete sačuvati kao zaseban fajl, ali CSS sprite (tzv. tehnologija lijepljenja nekoliko slika u jednu) imaju niz prednosti. Prvo, smanjen je broj zahtjeva prema serveru zbog smanjenja broja datoteka, a 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 su navedeni odvojeni zarezima, au ovom slučaju njihov redoslijed je važan. Ž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 ivice.

Provjeravamo u pretraživačima. Internet Explorer 8 nije prikazao nijednu sliku, ostali pretraživači (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) su ispravno prikazali okvir (slika 3).

Rice. 3. Prikaz okvira u Safari pretraživaču

Korištenje više pozadina čini situaciju mnogo lakšom za programere, posebno kada postavljaju blokove. Ostala je samo jedna sitnica. Neophodno je da IE 6–8 pretraživač prestane da postoji.