Mogu li koristiti više pozadinskih slika? Kako poravnati pozadinsku sliku udesno.

Važan dio web dizajna su CSS pozadine. Svojstva (ve) pozadine sadrže boje i slike koje služe kao pozadina sadržaja i odgovorne su za estetiku stranice. Izbriši CSS pozadine sa vaše web stranice i najvjerovatnije će se pojaviti kao tekst na bijeloj pozadini.

Budući da je relativno lako razumjeti, CSS pozadine, međutim, može izazvati zabunu i pokrenuti niz pitanja kada radite na određenim zadacima. Pokušaćemo da razjasnimo ovaj nesporazum i odgovorimo na pitanja koja se nameću prilikom rešavanja konkretnih problema.

Šta su CSS pozadine?

U suštini, naziv CSS pozadine je njihova definicija. Ovo je ono što dodajete pozadini elementa. Preciznije, oni su boja ili slika koja se nalazi iza sadržaja koji je dodan unutar elementa. Kada dizajnirate CSS web stranicu, ove boje i slike su obično odgovorne za većinu dizajna u vašem predlošku.

Pozadina elementa je opisana prema blok model SSS... Margine nisu dio pozadine, ali ivica, padding i širina sadržaja su dio pozadine.

Postoji 5 pozadinskih svojstava primjenjivih na CSS selektor, od kojih se 4 odnose na pozadinske slike:

Boja pozadine (boja pozadine) - postavlja boju pozadine elementa. Boja se može postaviti na hex, rgb ili jedno od ograničenih imena boja. Također, boja pozadine može biti postavljena na transparentnu ili naslijeđena roditeljski element... Više detalja u članku Background-image - - postavlja sliku kao pozadinu elementa, a njena vrijednost izgleda kao url ("path-to-image"). Svojstvo background-image se također može postaviti na ništa i naslijediti. Ponavljanje pozadine (pozadina-ponavljanje) - - postavlja ponavljanje pozadinske slike. Vrijednosti su repeat, no-repeat, repeat-x, repeat-y i inherit. Pozadinski prilog (background-attachment) - - postavlja kako pozadinska aplikacija kretat će se sa stranicom. Može da se pomera (pomeranje, kada se stranica pomera, pomera se sa elementom, podrazumevano), ostaje fiksno (fiksno, ostaje fiksno kada se stranica skroluje) ili nasleđuje (nasleđuje) vrednost roditeljskog elementa. Položaj pozadine (background-position) - Postavlja početnu poziciju pozadinske slike u elementu. Svojstvo background-position ima dvije vrijednosti, horizontalnu poziciju (može biti lijevo, središte, desno) i vertikalnu (može biti vrh, centar, dolje). Položaj pozadine se također može postaviti kao % od gornjeg lijevog ugla elementa.

Skraćenica za pozadinska CSS pravila

Moguće je podesiti svako svojstvo pozadine pojedinačno, ali u praksi ga je bolje pojednostaviti. U ovom slučaju, svojstva treba postaviti sljedećim redoslijedom: boja, slika, ponavljanje, aplikacija, pozicija (boja, slika, ponavljanje, prilog, pozicija).

Div (pozadina: # 0088ff, url ("puta-do-slike"), repeat-x, skrol, na vrhu lijevo}

Uz ovo pojednostavljenje, ne morate postavljati sva svojstva, ali se mora koristiti ispravan redoslijed... Svojstvima koja niste naveli bit će dodijeljene sljedeće zadane vrijednosti:

• boja pozadine: transparentna
• background-image: nema
• background-repeat: ponoviti
• pozadinski prilog: listanje
• pozadinski položaj: 0% 0%

Primjer stenografske notacije prikazan je u nastavku:

Pozadina: # 0077ff pozadina: url ("put do slike") pozadina bez ponavljanja: url ("put do slike") gore lijevo

Svaka od gornjih linija koda će koristiti zadane vrijednosti za nespecificirana svojstva.

CSS pozadinske slike nisu HTML slike

Važno je razumjeti da su slike postavljene sa koristeći CSS pozadina se ponašaju drugačije od slika navedenih pomoću .

Oznaka img kreira novi blok... CSS pozadinska slika se postavlja u postojeći blok. Ne možete dodati margine, obrub i pozadinu CSS pozadinskoj slici. Također, CSS pozadinska slika ne može biti postavljena na širinu i visinu.

Pošto je slika u html-u novi blok (inline blok, to jest, omotan je drugim elementima), ima širinu i visinu, padding i margine i ivicu. Štaviše, da img tag može se primijeniti pozadinska slika CSS. Ne znam koliko se to često koristi u praksi, ali ako želite, možete dodati sliku u pozadini za sliku.

Odgovori na uobičajena pitanja

Iako je pozadinsko svojstvo relativno jednostavno za korištenje i razumijevanje, rad s njim ipak može pokrenuti niz pitanja.

1. Zašto se pozadinska slika ne prikazuje?

To je obično zbog činjenice da element nema ni širinu ni visinu. Zapamtite da pozadinska slika ne stvara blok, već ispunjava postojeći. Ako ovaj blok nema ni širinu ni visinu, jednostavno nema šta popuniti. Rješenje je promjena veličine elementa. Elementu (ne pozadinskoj slici) možete dati visinu i širinu, ili možete ispuniti element sadržajem, pri čemu širinu i visinu kreirate sami.

U nekim slučajevima, element može sadržavati sadržaj koji je primijenjen float property koji izvlači sadržaj iz glavnog toka dokumenta. U ovom slučaju, element koji sadrži sadržaj (gdje žele dodati pozadinu) je formalno bez dimenzije. Da bi element bio veličine (tako da se sadržaj na koji se primjenjuje svojstvo float, bez obzira na to kako se izbio iz glavnog toka dokumenta), na njega mora biti primijenjeno svojstvo overflow.

2. Mogu li koristiti više pozadinskih slika?

Da i ne. CSS3 specifikacija vam omogućava da koristite više pozadinskih slika, međutim, pošto svi pretraživači ne prate u potpunosti ovu specifikaciju, bolje je odgoditi korištenje više slika.

Također zapamtite da možete primijeniti pozadinu na sve HTML elemente. Recimo da imate div koji sadrži h2 i pasus. Možete primijeniti pozadinske slike na svaku od njih, a kontroliranjem ostalih CSS svojstava, možete postići ono što želite !!! efekat. Također možete umetnuti dodatne divove i raspone unutar i izvan elementa, što će stvoriti više elemenata kojima možete dodati pozadinu. Ovaj pristup je prilično glomazan, ali funkcionira.

3. Kako zamijeniti pozadinske slike kada pređete mišem preko elementa?

Postoje dva načina. Morate dodati novo pravilo elementu sa: hover pseudo-klasom tako da pokazuje (pozadinska slika) na novu sliku, ili napravite sliku kao Sprite css i promijenite njegovu pozadinu da prikaže drugi dio sprite-a.

Važno je napomenuti da starije verzije IE ne podržavaju: hover pseudo-klasu. prirodno tako da je potrebno malo javascripta da bi ove metode funkcionisale u IE. Radije koristim rješenje suckerfish, isto rješenje koje koristim za padajuće menije.

4. Kako da učinim pozadinske slike transparentnim?

Možete dodati transparentnost slici kada je kreirate u Photoshopu. U tom slučaju, pogled na sliku se može promijeniti, ali će i dalje biti nemoguće vidjeti kroz nju.

5. Može li se pozadinska slika postaviti u tabelu, red tabele ili ćeliju tabele?

Da. Ovo su sve html elementi, tako da mogu prihvatiti pozadinska svojstva. Međutim, pozadine stola imaju težak način definicija koja koristi slojeve i transparentnost, kao što je prikazano na slici ispod:

Pozadina elementa na jednom sloju je vidljiva samo ako je pozadina slojeva iznad njega prozirna. Ovo može izgledati zbunjujuće, tako da mnogi ljudi radije koriste html atribute kada kreiraju pozadinu tablice.

Srećom, postavljena je zadana neprozirnost, tako da bi gornji slojevi već trebali biti transparentni. Međutim, kada počnete da dodajete pozadinu jednom delu tabele, postignite korektan rad može biti prilično teško

.

6. Mogu li dodati pozadinsku sliku na ivice?

Ne još. Obećavaju da će implementirati ovo svojstvo u SSS3. Ako vas nije sramota što neće raditi u mnogim pretraživačima, možete ga koristiti sada.

7. Mogu li dodati pozadinske slike na liste?

Da. Liste su isti html elementi, tako da mogu prihvatiti pozadinske slike. Pozadinska slika se lako može koristiti kao bullet (bullet) liste. Mislim da sa ovim neće biti poteškoća.

8. Kako da uvučem pozadinsku sliku?

Kao što sam ranije spomenuo, pozadinska slika ne stvara novi CSS blok, tako da joj se ne može dodati vodeni žig. Umjesto toga, morate koristiti svojstvo background-position za pomicanje rezultirajuće pozadinske slike. Postoje i drugi načini.

9. Kako desno poravnati pozadinsku sliku.

Slično kao u prethodnim pitanjima, odgovor se odnosi na pozadinu. Koristite pravu vrijednost za svojstvo background-position (background-position: right;) i slika će biti poravnata desno od elementa.

10. Zašto se pozadinska slika ne prikazuje kada se odštampa?

Ne postoji kontrola nad ovom imovinom iz dobrog razloga. Za štampanje slike potrebno je mnogo mastila, pa mnogi ljudi odlučuju da je ne štampaju. Štampanje ili ne štampanje slike se podešava pojedinačno u pretraživaču. Preporučujem da ovo ostavite kako jeste, ali ako odlučite da štampate, evo načina da zaobiđete justaddwater.dk/2009/09/29/print-css-background-logo-hack/ koji nije dozvoljen za štampanje.

11. Kako da rastegnem pozadinsku sliku da stane u element?

Drugi moguće rješenje služi za kreiranje slike koja je mnogo veća nego što je potrebno, a pozicija pozadine je postavljena na 50% 50%. Na ovaj način pozadinska slika će biti centrirana unutar elementa, a kako širina elementa raste, sve više slike postaje vidljivo. Ovo će zadržati sliku u centru.

Nije baš naporno, ali osigurava da slika ispuni prostor kada se prostor poveća.

12. Možete li umotati vezu oko pozadinske slike?

br. Opet, pozadinske slike ne stvaraju blokove. Rješenje bi bilo da dodate vezu oko cijelog sadržaja unutar html elementa ili omotate vezu oko samog elementa. Izbor opcije zavisi od html elementa i sadržaja unutar tog elementa.

Zaključak

Nadam se da će vam ovaj članak pomoći da riješite pitanja koja se mogu pojaviti prilikom rada s njima pozadini CSS svojstva , ili riješite problem koji imate. Važno je zapamtiti, CSS pozadine nemojte kreirati nove blokove. Oni popunjavaju samo postojeće html blokove. Razumijevanje ove točke pomoći će vam da odredite šta možete, a šta ne možete raditi sa pozadinskim slikama.

CSS pozadine igraju ključnu ulogu u tome kako se korisnici osjećaju o vašem dizajnu. Većina slika koje kreirate za svoju web stranicu bit će postavljena korištenjem svojstva pozadine, tako da je ovo prva stvar koju treba nabaviti.

Nekoliko pozadinskih slika može se dodati jednom elementu odjednom kroz jedno svojstvo pozadine. Ovo omogućava korištenje jednog elementa za kreiranje složena pozadina ili jednu sliku, prikazujući je nekoliko puta sa različite postavke... Sve slike sa svojim parametrima su navedene odvojene zarezima, pritom je prva prikazana slika koja se prikazuje iznad ostalih slika, a posljednja je najniža slika. Primjer 1 pokazuje kako napraviti pozadinu sa tri slike.

Primjer 1. Tri pozadine

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. jedan.

Rice. 1. Pozadina sa tri slike

Odvojene slike za pozadinu omogućavaju vam da promijenite njihov položaj, kao 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 se proteže ovisno o volumenu sadržaja bloka.

Rice. 2. Ručno nacrtani okvir

Na slici se jasno vidi gornji i Donji dio na rez grafički editor i postavite ga vodoravno. Srednji dio je odabran tako da se ponavlja okomito bez šavova. Slika ima izražen obrazac koji se ponavlja, tako da ne bi trebalo biti poteškoća s odabirom. Kao rezultat, dobićete ovako pripremljenu sliku (slika 3). Karirani okvir označava transparentnost, omogućava vam da postavite pozadinu u boji zajedno sa slikama i lako je promijenite kroz stilove.

Rice. 3. Pripremljeno za sliku u pozadini

Sama pozadina je prikazana pozadinom svojstvom, ona također postavlja 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 crta gornju granicu okvira, druga pozadina crta donju, a treća okomite granice. Posljednja je boja koja je vidljiva u providnom središnjem dijelu bloka (sl. 4).

U CSS 2, dodavanje dvije pozadine jednom elementu u isto vrijeme je nerealno, tako da morate ugnijezditi jedan element unutar drugog i postaviti vlastitu pozadinsku sliku za svaki. Za složene rasporede takvih priloga se ponekad može izbrojati desetak. Jasno je da takva gomila 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 koju stavku. Dakle, uzimamo blok crtež (slika 1), isečemo ga na komade i počinjemo da 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. Slika jasno pokazuje gornji i donji dio, izrezao sam je u uređivaču i presavio u slojeve u zasebnu datoteku. Srednji dio mora biti odabran tako da se ponavlja okomito bez šavova. Crtež ima dobro definisan obrazac koji se ponavlja, tako da ne bi trebalo biti poteškoća s odabirom. Kopirajte i zalijepite na prethodne isječke. Kao rezultat, dobićete takvu sliku (slika 2).

Rice. 2. Pripremljene slike

U osnovi, moguće je sačuvati svaki komad kao poseban fajl, ali CSS sprites (ovo je naziv tehnologije za lijepljenje nekoliko slika u jednu) ima niz prednosti. Prvo, smanjen je broj zahtjeva prema serveru zbog smanjenja broja datoteka, a drugo, ukupne slike se brže učitavaju i prikazuju.

Sama pozadina je prikazana pozadinom svojstvom, ona također postavlja 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. Više pozadinskih slika

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

Prva pozadina crta gornju granicu okvira, druga pozadina crta donju, a treća okomite granice.

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

Rice. 3. Pogled na okvir u Safari pretraživaču

Korištenje više pozadina čini situaciju mnogo lakšom za programere, posebno kada se raspored blokira. Ostala je samo jedna sitnica. IE 6-8 pretraživač treba da prestane da postoji.

• Tutorial

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

Kompozicija pozadine

Postoji mnogo razloga zašto, općenito, možda ćete morati sastaviti nekoliko slika u pozadini, među kojima 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 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 iznad druge. Kako se ovaj zadatak obično rješava? Vrlo je jednostavno: za svaku pozadinsku sliku 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 s klasom "ribolov" unutar "sirena" 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 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; pozicija: apsolutna;) .sample1 .fishing (pozadina: url (media / fishing.svg) bez ponavljanja gore desno 10px;)

rezultat:

V ovaj primjer tri ugniježđene pozadine i jedan blok sa ribama, koji se nalazi pored blokova "pozadine". U teoriji, riba se može pomicati, na primjer, sa koristeći JavaScript ili CSS3 tranzicije / animacije.

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 Opera 11+, ali nije podržan u Firefoxu 10 i Chromeu 16. Tako da korisnici posljednja dva pregleda još uvijek neće moći uloviti ribu.

Više pozadina

Dolazi u pomoć nova opcija dodata u CSS3 je mogućnost definiranja više pozadinskih slika za jedan element odjednom. 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 (pozadina: url (" media / fish.svg ") bez ponavljanja; visina: 70px; širina: 100px; lijevo: 30px; vrh: 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 lista, možete podesiti pozicioniranje, ponavljanja i druge parametre za svaku od slika. Obratite pažnju na redosled po kojem su slike navedene: slojevi su izlistani s leva na desno od vrha do kraja.

Rezultat je potpuno isti:

Jedno pravilo

Ako ribu nije potrebno odabrati u posebnom bloku 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;)

Neću davati sliku sa rezultatom - 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 navedena lista onoliko puta koliko je potrebno da odgovara broju slika na listi.

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

Čak i kraće

Ako se sećate CSS 2.1, on definiše mogućnost opisivanja pozadinskih slika na sažet način. Šta 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 samo preskočiti vrijednosti (osim ako se ne poklapaju sa zadanim). 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 ne više nego ovisno o veličini spremnika, tada više pozadina očigledno pojednostavljuje dizajn stranice. Ali šta ako treba da radite sa pojedinačnim elementima kompozicije nezavisno od javascripta (pomeranje, pomeranje, itd.)?

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


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

...

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 se stalno pomera, a po ekranu lete maslačak.

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

Kako da dodam 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 je potrebno samo 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 raditi selektivno.

Za dodavanje animacije našoj pozadini s ribom, možete koristiti sljedeći kod:
$ (dokument) .ready (funkcija () (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 (- ribeX< 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 = "top" + fishY + "px desno" + fishX + "px," + mermaidX + "px dolje," + fishesX + "px" + fishesY + "px, gore lijevo"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
gdje
window.requestAnimFrame = (funkcija () (povratak window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funkcija (povratni poziv)); (60 ); );

Inače, animacije se mogu raditi i preko CSS3 Transitions/Animations, ali to je tema za posebnu raspravu.

Paralaksa i interaktivnost

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

Višestruke pozadinske slike su korisne u takvim scenarijima, jer iako govorimo samo o pozadini (a ne o sadržaju), njihovo korištenje vam omogućava da izbjegnete zatrpavanje vašeg html koda i DOM-a. Ali morate platiti za sve: ne mogu kontaktirati pojedinačni elementi kompozicija po imenu, ID-u, klasi ili nekom drugom parametru. Moram jasno 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 kompletnu kompoziciju.

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

Siguran sam da se može upakovati pogodan kod na javascript, koji će preuzeti virtuelizaciju odnosa sa pojedinačnim slojevima, ostavljajući html-kod stranice što čistijim.

Š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 svojoj bilješci o redoslijedu slojeva kada koristite više pozadina, uradite nešto poput ovoga:

Multiplebgs tijelo (/ * Sjajne višestruke BG deklaracije koje nadilaze stvarnost i izvore cura * /) .no-multiplebgs tijelo (/ * laaaaaame rezervni dio * /)
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ćeg dvostruko punjenje resursi (zavisi od implementacije css obrade u određenom pretraživaču):

/ * višestruki bg backback * / pozadina: # 000 url (...) ...; / * Sjajne višestruke BG deklaracije koje prevazilaze stvarnost i imsources ribe * / pozadinski 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 se interno koristi isti motor kao u 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