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

Rezultat ovog primjera prikazan je na sl. 3.

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-a 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 implementira se korištenjem više vrijednosti css parametar pozadine, koje su odvojene 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, desno gore; širina: 400px; visina: 400px; ivica: 1px čvrsta #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 sve! 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

). Danas ćemo malo pričati o još jednoj zanimljivoj funkciji - korištenju 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 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 .mermaid (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:

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, kao i lista, mogu 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 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 ; )

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č mora ponoviti navedenu listu potreban broj puta kako bi odgovarao 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 pristupiti pojedinačnim elementima kompozicije po imenu, ID-u, klasi ili bilo kojem 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 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 zabrinuti za korištenje JS-a za kompatibilnost unatrag, možete jednostavno dvaput deklarirati pozadinu, iako to također ima svoje nedostatke u vidu mogućeg dvostrukog učitavanja resursa (ovo ovisi o implementaciji 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 .

Danas ćemo raditi na pozadinskim slikama, koje se postavljaju pomoću svojstva background i njegovih dodatnih vrijednosti. Pogledajmo nekoliko praktičnih primjera instaliranja više pozadina za isti element.

Ovo može biti korisno u mnogim slučajevima i trenucima. Posebno korištenje pseudo elemenata u ovom slučaju, jer su vrlo fleksibilni u parametrima.

Mnogo pozadinskih slika

Kako ne biste stvarali blok unutar bloka, najlakši način je da glavnom elementu dodate jednu liniju pravila i tako dobijete željeni rezultat. Ovo možemo smatrati lakoničnom opcijom, pogotovo jer eliminira potrebu da se još jednom ulazi izvor. Sve će se raditi samo pomoću CSS-a.

Blockimg(pozadina: url("img/img2.png"),/*najviša pozadina i zatim redom*/ url("img/img3.png"), url("img/img1.jpg"); background-position : 370px centar, 120px 150px, centar centar;/*pozicija slika*/ background-repeat: no-repeat;/*repeat picture*/ background-color: #444;/*ako je potrebna boja pozadine*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margina: 100px auto 15px; box-sizing: border-box; padding: 25px; širina:700px; min-height: 300px; ) /*skraćena verzija*/ . blockimg ( background: url("img/img2.png") bez ponavljanja 370px centar, url("img/img3.png") bez ponavljanja 120px 150px, url("img/img1.jpg") bez ponavljanja centar centar; margina: 100px auto 15px; veličina kutije: border-box; padding: 25px; širina:700px; min-height: 300px; )

Objašnjenje. Elementu dajemo pozadinsku sliku, koja označava putanju do njegove lokacije. Razdvojeni zarezima, pruža nam se mogućnost da unesemo mnogo više pozadina, kao što se može vidjeti u kodu iznad. Redoslijed njihovih brojeva određuje koja će slika biti iznad ostalih. Odnosno, prva pozadina je viša od svih ostalih, a zatim redoslijed slijedi princip običnog grafičkog uređivača.

Zatim se kroz pojedinačna svojstva specificiraju dodatni parametri: pozicija, ponavljanje, veličina i, ako je potrebno, boja. Također imajte na umu da se svi parametri pišu odvojeni zarezima, istim redoslijedom kao i broj na slici.

I poslednji detalj. Cijeli kod se može skratiti korištenjem samo jednog generičkog svojstva, background. Postoji druga opcija u primjeru koda koja pokazuje kako se to radi.

Pozadinska slika putem pseudo elementa

Takođe ne zaboravite na alternativne opcije kao takvi su pseudoelementi prije i poslije. Postoji pozitivna prednost u njihovoj upotrebi - slika se može pomjeriti izvan ruba elementa, tako da ne nestane na ivici, već je na vrhu. Ova tehnika će vam dobro doći ako trebate stvoriti nešto poput 3D efekta.

Blockimg( background: url("img/img1.jpg") no-repeat;/*element background*/ position:relative;/*područje pozicioniranja*/ margina: 200px auto 15px; box-sizing: border-box; padding: 25px; širina:700px; min-visina: 300px; ) .blockimg::before( background: url("img/img1.png") centar bez ponavljanja; dno: 0; sadržaj: ""; visina: 295px; lijevo: 0; pozicija: apsolutna;/*apsolutno pozicioniranje*/ desno: 0; gore: -150px; )

Objašnjenje. U stvari, sve je vrlo jednostavno. Pozadinu glavnog elementa postavljamo na uobičajen način. Sljedeće dolazi ključna pozicija svojstva: relativno; , koji definira područje za pomicanje drugog elementa koji se nalazi u glavnom elementu i ima svojstvo position:apsolute; .

Umjesto drugog elementa, iako formalno ide kao posebna oblast, koristimo pseudoelement. Dajemo mu apsolutnu poziciju i postavljamo ga na mjesto koje nam je potrebno.