Danas gotovo svaki dizajn web stranice sadrži prekrasnu pozadinsku sliku.
Svaki dizajner izgleda zna da je najjednostavniji način kreiranja dizajna najbolji koji može biti. Jedna od jednostavnih i praktičnih tehnika je korištenje nekoliko linije css kod.
Činilo bi se kao mala stvar, ali ipak, ponekad morate učiniti nešto komplikovano na jednostavan način. Na primjer, implementirajte nekoliko pozadina s pojedinačnim parametrima, bez korištenja pomoćnih div blokova. Odnosno, štednja.
U ovom članku ćemo pogledati sintaksu koda koja podržava više pozadina u jednom elementu. Evo kako to izgleda u stvarnom životu:
CSS kod za više pozadina
Više pozadinskih slika implementirano je korištenjem višestrukih vrijednosti parametara pozadine css, koje su razdvojene zarezom:
#multipleBGs (pozadina: url(photo1.png), url(photo2.png), url(photo3.png) ; background-repeat: ne-repeat, no-repeat, repeat-y; background-position: 0 0, 30px 70px, desni vrh: 400px ivica: 1px puna #ccc;
Pokušao sam da uradim isto sa kratkim kodom. Nažalost, ne radi.
Osim toga, možete koristiti i druga svojstva pozadine (pozadinski prilog, pozadinski isječak, pozadinska slika, porijeklo pozadine, pozicija pozadine, pozadina-ponavljanje, veličina pozadine). Isto kao i sa CSS gradijentima.
To je to! Nadam se da vam se svidjela ova tehnika kreiranja više pozadina, bez korištenja ikakvih pomoćnih elemenata. Čisti semantički kod.
Ako imate bilo kakvih pitanja, komentara ili prijedloga o ovoj tehnici za kreiranje više pozadina, pišite u komentarima. Takođe, želeo bih da testiram za
Zadatak
Cross-browser dodaje dvije pozadinske slike za blok.
Rješenje
Pozadinske slike se prilično aktivno koriste za stvaranje blokova, jer se uz njihovu pomoć formiraju najbizarniji dizajni. Konkretno, elementu možete dodati ukrasne kutove, vertikalne i horizontalne linije i još mnogo toga.
Unakrsni pretraživač (to jest, za sve pretraživače, uključujući starije verzije) ne možete dodati dvije pozadine jednom elementu, tako da morate koristiti trik i ugnijezditi jedan element u drugi. U ovom slučaju, za svaki ugniježđeni element kreira se vlastita pozadinska slika, zbog preklapanja blokova, i stvara se efekat da postoji samo jedan element, a sadrži nekoliko pozadinskih slika. Ovdje je važna stvar da ne dodate padding vanjski elementi, inače će se efekat izgubiti.
Na primjer, razmislite o stvaranju vertikalnih ukrasnih linija lijevo i desno od bloka. Da biste to učinili, prvo pripremite slike koje treba ponoviti okomito bez spojeva. Na sl. Na slici 1 prikazana je pozadinska slika koja će se koristiti za prvi element formiraće ivicu sa leve strane, a na Sl. 2 pozadina za ugniježđeni element koji dodaje ivicu s desne strane.
Rice. 1. Pozadinska slika za ivicu s lijeve strane
Rice. 2. Pozadinska slika za ivicu na desnoj strani
Blok element kojem se dodaje pozadina obično koristi oznaku
Primjer 1: Dvije pozadinske slike
HTML5 CSS 2.1 IE Cr Op Sa Fx
Primljeno od radio stanice Cape Chelyuskin 7450 grupa.
Rezultat ovog primjera prikazan je na sl. 3.
Rice. 3. Pogled na blok sa dvije pozadinske slike
nalazi se unutra ). 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
Možda postoje i drugi razumni razlozi :)
Dakle, moramo postaviti nekoliko pozadinskih slika jednu na drugu. Kako se ovaj problem obično rješava? Vrlo je jednostavno: za svaku pozadinsku sliku kreira se blok kojem se dodjeljuje 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 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; )
rezultat: 
U ovom primjeru postoje tri ugniježđene pozadine i jedan blok sa ribom koji se nalazi pored blokova „pozadine“. U teoriji, ribe se mogu premještati, na primjer, koristeći JavaScript ili CSS3 Transitions/Animations.
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 uloviti ribu.
Više pozadina
Nova opcija dodana u CSS3 dolazi u pomoć - 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 navedenu listu pravi 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č raspoređuje 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
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 umotati u zgodan javascript kod, koji će se pobrinuti za virtuelizaciju odnosa sa pojedinačnim slojevima, dok će html kod stranice ostati što čistiji.
Šta je sa kompatibilnošću?
Sve moderne verzije popularnih pretraživača, uključujući IE9+, podržavaju više slika (možete provjeriti, na primjer, Caniuse).Modernizr možete koristiti i za pružanje alternativnih rješenja za pretraživače 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 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
Zadatak
Dodajte dvije pozadinske slike u blok koristeći CSS3.
Rješenje
Moderni pretraživači vam omogućavaju da elementu dodate proizvoljan broj pozadinskih slika, navodeći parametre svake pozadine odvojene zarezima. Dovoljno je koristiti svojstvo univerzalne pozadine i navesti jednu pozadinu za nju prvo, a drugo, odvojeno zarezom.
Na primjer, razmislite o stvaranju vertikalnih ukrasnih linija lijevo i desno od bloka. Da biste to učinili, prvo pripremite slike koje treba ponoviti okomito bez spojeva. Na sl. 1 prikazuje pozadinsku sliku, koja će biti prikazana na lijevoj ivici, a na Sl. 2 slika za prikaz na desnoj ivici.
Rice. 1. Pozadinska slika za ivicu s lijeve strane
Rice. 2. Pozadinska slika za ivicu na desnoj strani
Blok element kojem se dodaje pozadina obično koristi oznaku
Primjer 1: Dvije pozadinske slike
HTML5 CSS3 IE Cr Op Sa Fx
Primljeno od radio stanice Cape Chelyuskin 7450 grupa.
Možete dodati više pozadinskih slika jednom elementu odjednom kroz jedno svojstvo pozadine. Ovo vam omogućava da koristite jedan element za stvaranje složene pozadine ili jedne slike, prikazujući je nekoliko puta s različitim postavkama. 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
Na slici su jasno prikazani gornji i donji dijelovi koje je potrebno izrezati 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 prozirnost 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, au ovom slučaju njihov redoslijed je važan. Ž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 pozadinskih slika
Huitzilopochtli - "čarobnjak kolibrića", bog rata i sunca.
Tezcatlipoca - "ogledalo koje se puši", glavni bog Asteka.
Ljudske žrtve su prinošene oba boga.
Prva pozadina prikazuje gornju granicu bloka, druga pozadina - donju, a treća - okomite ivice. Posljednja boja je ona koja se vidi u providnom središnjem dijelu bloka (sl. 4).
PregledMožda će vam se također svidjeti
Mobilni internet od MTS-a
Deset besplatnih programa za narezivanje optičkih diskova
