zbog svoje pogodnosti i svestranosti, kako bi se razlikovao od ostalih elemenata, dodana mu je klasa blok (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 lijepu pozadinsku sliku.

Svaki dizajner izgleda zna da je najjednostavniji način stvaranja dizajna najbolji koji može biti. Jedna od jednostavnih i praktičnih tehnika je korištenje nekoliko linije css-a kodirati.

Čini se kao mala stvar, ali ipak, ponekad morate učiniti nešto komplicirano na jednostavan način. Na primjer, implementirajte nekoliko pozadina s pojedinačnim parametrima, bez upotrebe pomoćnih blokova div. 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šestruke pozadinske slike implementirane su pomoću višestrukih vrijednosti css parametar pozadina, koji su odvojeni zarezom:

#multipleBGs ( pozadina: url(photo1.png), url(photo2.png), url(photo3.png) ; pozadinsko ponavljanje: bez ponavljanja, bez ponavljanja, ponavljanje-y; položaj pozadine: 0 0, 30px 70px, desno gore; širina: 400px; visina: 400px; obrub: 1px puni #ccc; )

Pokušao sam učiniti isto s kratkim kodom. Nažalost, ne ide.

Osim toga, možete koristiti druga pozadinska svojstva (pozadinski prilog, pozadinski isječak, pozadinska slika, pozadinsko podrijetlo, položaj pozadine, ponavljanje pozadine, veličina pozadine). Isto kao i s CSS gradijentima.

To je sve! Nadam se da vam se svidjela ova tehnika stvaranja više pozadina, bez korištenja pomoćnih elemenata. Čisti semantički kod.

Ako imate pitanja, komentara ili prijedloga o ovoj tehnici za izradu više pozadina, napišite u komentarima. Također, želio bih testirati za

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

Danas ćemo raditi na pozadinskim slikama koje se postavljaju pomoću svojstva pozadine 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. Osobito korištenje pseudo elemenata u ovom slučaju, jer su vrlo fleksibilni u parametrima.

Puno pozadinskih slika

Kako ne biste stvarali blok unutar bloka, najjednostavnije je dodati jedan redak pravila u glavni element i tako dobiti željeni rezultat. Možemo ovo smatrati lakonskom opcijom, pogotovo jer eliminira potrebu za ponovnim zalaženjem izvor. Sve će biti učinjeno samo pomoću CSS-a.

Blockimg( pozadina: url("img/img2.png"),/*najgornja pozadina i zatim sekvencijalno*/ url("img/img3.png"), url("img/img1.jpg"); pozicija pozadine: 370px center, 120px 150px, center center;/*položaj slika*/ background-repeat: no-repeat;/*ponavljanje slike*/ 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; width:700px; min-height: 300px; ) /*skraćena verzija*/ . blockimg ( pozadina: 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 okvira: border-box; padding: 25px; width:700px; min-height: 300px; )

Obrazloženje. Elementu dajemo pozadinsku sliku koja pokazuje put do njegove lokacije. Odvojeni zarezima, pruža nam se mogućnost unosa mnogo više pozadina, kao što se može vidjeti u gornjem kodu. Redoslijed njihovih brojeva određuje koja će slika biti iznad ostalih. To jest, prva pozadina je viša od svih ostalih, a zatim slijed slijedi načelo običnog grafičkog uređivača.

Zatim se kroz pojedinačna svojstva zadaju dodatni parametri: položaj, ponavljanje, veličina i po potrebi boja. Također imajte na umu da se svi parametri pišu odvojeni zarezima, istim redoslijedom kao i broj slike.

I posljednji detalj. Cijeli kod može se skratiti korištenjem samo jednog generičkog svojstva, pozadine. U primjeru koda postoji druga opcija koja pokazuje kako se to radi.

Pozadinska slika putem pseudo elementa

Također ne zaboravite na alternativne opcije kao takvi su pseudoelementi prije i poslije. Postoji pozitivna prednost njihove upotrebe - slika se može pomaknuti izvan ruba elementa, tako da ne nestaje na granici, 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;/*positioning area*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) .blockimg::before( background: url("img/img1.png") bez ponavljanja center center; bottom: 0; content: ""; height: 295px; lijevo: 0; pozicija: apsolutno;/*apsolutno pozicioniranje*/ desno: 0; gore: -150px; )

Obrazloženje. Zapravo, sve je vrlo jednostavno. Pozadinu postavljamo na glavni element na uobičajeni način. Slijedi položaj ključnog svojstva: relativno; , koji definira područje za pomicanje drugog elementa koji se nalazi u glavnom elementu i ima svojstvo position:absolute; .

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