zaradi njegove priročnosti in vsestranskosti, da bi se razlikoval od drugih elementov, mu je dodan razred blokov (primer 1).

Primer 1: Dve sliki ozadja

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat tega primera je prikazan na sl. 3.

Danes skoraj vsak dizajn spletnega mesta vsebuje čudovito sliko ozadja.

Vsak oblikovalec postavitev ve, da je najenostavnejši način za ustvarjanje dizajna najboljši, kar je lahko. Ena od preprostih in priročnih tehnik je uporaba več vrstice css Koda.

Zdi se, da je majhna stvar, vendar je včasih treba narediti nekaj zapletenega na preprost način. Na primer, implementirajte več ozadij s posameznimi parametri, brez uporabe pomožnih blokov div. Oziroma varčevanje.

V tem članku si bomo ogledali sintakso kode, ki podpira več ozadij v enem elementu. Takole je videti v resničnem življenju:

Koda CSS za več ozadij

Več slik v ozadju je implementiranih z uporabo več vrednosti css parameter ozadje, ki sta ločeni z vejico:

#multipleBGs ( ozadje: url(foto1.png), url(foto2.png), url(foto3.png) ; ponavljanje ozadja: brez ponavljanja, brez ponavljanja, ponavljanje-y; položaj ozadja: 0 0, 30px 70 slikovnih pik, desno zgoraj; širina: 400 slikovnih pik; višina: 400 slikovnih pik; obroba: 1 slikovna pika polna #ccc; )

Enako sem poskušal narediti s kratko kodo. Na žalost ne gre.

Poleg tega lahko uporabite druge lastnosti ozadja (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Enako kot pri prelivih CSS.

To je vse! Upam, da vam je bila všeč ta tehnika ustvarjanja več ozadij brez uporabe pomožnih elementov. Čista semantična koda.

Če imate kakršna koli vprašanja, komentarje ali predloge o tej tehniki za ustvarjanje več ozadij, napišite v komentarje. Prav tako bi rad testiral za

). Danes bomo nekaj govorili o še eni zanimivi funkciji - uporabi več slik v ozadju.

Sestava ozadja

Obstaja veliko razlogov, zakaj bi sploh želeli sestaviti več slik v ozadju, med katerimi so najpomembnejši:

• prihranek prometa na velikosti slik, če posamezne slike skupaj tehtajo manj kot slika s sploščenimi plastmi in
• potreba po neodvisnem obnašanju posameznih slojev, na primer pri izvajanju učinkov paralakse.

Lahko so tudi drugi razumni razlogi :)

Klasičen pristop

Zato moramo postaviti več slik ozadja eno na drugo. Kako se običajno reši ta problem? Zelo preprosto: za vsako sliko ozadja se ustvari blok, ki mu je dodeljena ustrezna slika ozadja. Bloki so ugnezdeni drug v drugega ali postavljeni v vrsto z ustreznimi pravili pozicioniranja. Tukaj je preprost primer:

Blok z razredom "ribolov" znotraj "sirena" je samo v predstavitvene namene.

Zdaj pa nekaj stilov:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (height:300px; width:480px; position: relative; ) .sample1 .sea (ozadje: url(media/sea.png) repeat-x zgoraj levo; ) .sample1 .mermaid (ozadje: url(media/mermaid.svg) repeat-x spodaj levo; ) .sample1 .fish (ozadje: url(media/fish.svg) no-repeat; height:70px; width:100px; levo : 30px; zgoraj: 90px; položaj: absolutno; ) .sample1 .fishing ( ozadje: url(media/fishing.svg) brez ponavljanja zgoraj desno 10px; )

rezultat:

V tem primeru so tri ugnezdena ozadja in en blok z ribami, ki se nahaja poleg blokov »ozadje«. Teoretično je mogoče ribe premikati na primer z uporabo prehodov/animacij JavaScript ali CSS3.

Mimogrede, ta primer za ».fishing« uporablja novo sintakso za pozicioniranje v ozadju, ki je prav tako definirana v CSS3:
ozadje: url(media/fishing.svg) brez ponavljanja zgoraj desno 10px;
Trenutno je podprt v IE9+ in Operi 11+, ni pa podprt v Firefoxu 10 in Chromu 16. Tako uporabniki zadnjih dveh brskalnikov še ne bodo mogli loviti ribe.

Več ozadij

Na pomoč priskoči nova možnost, dodana CSS3 – možnost definiranja več slik ozadja za en element. Videti je takole:

In pripadajoči slogi:
.sample2 .sea ( višina:300px; širina:480px; položaj: relativno; slika ozadja: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); položaj ozadja: zgoraj desno 10 slikovnih pik, spodaj levo, zgoraj levo; ponavljanje ozadja: brez ponavljanja, ponavljanje-x, ponavljanje-x ; ) .sample2 .fish (ozadje: url("media/fish.svg) ") brez ponavljanja; višina: 70 slikovnih pik; širina: 100 slikovnih pik; levo: 30 slikovnih pik; zgoraj: 90 slikovnih pik; položaj: absolutno; )
Če želite definirati več slik, morate uporabiti pravilo za slike ozadja, pri čemer navedete posamezne slike, ločene z vejicami. Dodatna pravila, tudi seznam, lahko nastavijo položaj, ponovitve in druge parametre za vsako sliko. Upoštevajte vrstni red, v katerem so navedene slike: plasti so navedene od leve proti desni od skrajne zgornje do skrajne spodnje.

Rezultat je popolnoma enak:

Eno pravilo

Če rib ni treba ločiti v ločen blok za nadaljnje manipulacije, lahko celotno sliko prepišete z enim preprostim pravilom:

Slogi:
.sample3 .sea ( višina:300px; širina:480px; položaj: relativno; slika ozadja: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); položaj ozadja: zgoraj desno 10 slikovnih pik, spodaj levo, 30 slikovnih pik 90 slikovnih pik, zgoraj levo; ponavljanje ozadja: brez ponavljanja, ponovitev-x ; )

Ne bom pokazal slike rezultata - verjemite mi, sovpada z zgornjima slikama. Toda spet bodite pozorni na sloge, še posebej na "background-repeat" - v skladu s specifikacijo, če manjka del seznama na koncu, mora brskalnik navedeni seznam ponoviti zahtevano število krat, da se ujema s številom slik na seznamu.

V tem primeru je enakovreden temu opisu:
ponavljanje v ozadju: brez ponavljanja, ponavljanje-x, no-repeat, repeat-x;

Še krajše

Če se spomnite CSS 2.1, je definiral možnost opisovanja slik ozadja v kratki obliki. Kaj pa več slik? To je možno tudi:

Sample4 .sea (height:300px; width:480px; position: relative; background: url("media/fishing.svg") zgoraj desno 10px no-repeat, url("media/mermaid.svg") spodaj levo repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Vendar upoštevajte, da zdaj ne morete preprosto preskočiti vrednosti (razen če se ujemajo s privzeto vrednostjo). Mimogrede, če želite nastaviti barvo slike ozadja, morate to narediti v zadnjem sloju.

Dinamične slike

Če je kompozicija statična ali največ dinamična, odvisno od velikosti vsebnika, potem več ozadij očitno poenostavi oblikovanje strani. Kaj pa, če morate delati s posameznimi elementi kompozicije neodvisno od javascripta (premikati, drsiti itd.)?

Mimogrede, tukaj je primer iz življenja - tema z regratom v Yandexu:


Če pogledate v kodo, boste videli nekaj takega:

...

Bloki z razredi "b-fluff-bg", "b-fluff__cloud" in "b-fluff__item" vsebujejo slike ozadja, ki se prekrivajo. Poleg tega se ozadje z oblaki nenehno premika, regrat pa leti po zaslonu.

Ali je to mogoče prepisati z uporabo več ozadij? Načeloma da, vendar pod pogojem 1) podpore za to funkcijo v ciljnih brskalnikih in ... 2) berite dalje;)

Kako dodati dinamiko več ozadjem? V takšni situaciji se izkaže za priročno, da brskalnik v notranji predstavitvi razdeli posamezne parametre slik ozadja v skladu z ustreznimi pravili. Na primer, za pozicioniranje je "background-position", za premike pa je dovolj, da spremenite samo to. Vendar pa obstaja strošek za uporabo več slik - to pravilo (in katero koli podobno) zahteva, da navedete položaj za vsa ozadja, definirana za vaš blok, in tega ne morete narediti selektivno.

Če želite našemu ribjemu ozadju dodati animacijo, lahko uporabite naslednjo kodo:
$(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() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) morska deklica X = 0; fishY = -10 + (10 * Math.cos(t * 0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "zgoraj" + fishY + "px desno" + fishX + "px, " + sirenaX + "px spodaj," + fishesX + "px" + fishesY + "px, zgoraj levo"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Kje
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60) ); )); ))();

In mimogrede, animacije je mogoče narediti tudi z uporabo CSS3 Transitions/Animations, vendar je to tema za ločeno razpravo.

Paralaksa in interaktivnost

Končno lahko podobni manevri zlahka dodajo učinke paralakse ali interaktivno interakcijo z ozadjem:

Več slik za ozadje je koristnih v takšnih scenarijih, saj medtem, ko govorimo samo o ozadju (in ne o vsebini), nam njihova uporaba omogoča, da se izognemo smetenju kode html in DOM. Toda vse ima svojo ceno: ne morem dostopati do posameznih elementov kompozicije po imenu, ID-ju, razredu ali katerem koli drugem parametru. Izrecno si moram zapomniti vrstni red elementov v sestavi v kodi in za vsako spremembo katerega koli parametra katerega koli elementa moram pravzaprav zlepiti vrstico, ki opisuje vrednosti tega parametra za vse elemente in jo posodobiti za celotno kompozicijo.

Sea.style.backgroundPosition = "zgoraj" + fishY + "px desno" + fishX + "px, " + sirenaX + "px spodaj," + fishesX + "px" + fishesY + "px, zgoraj levo";

Prepričan sem, da je to mogoče zaviti v priročno javascript kodo, ki bo poskrbela za virtualizacijo odnosov s posameznimi sloji, pri tem pa pustila čim bolj čisto html kodo strani.

Kaj pa združljivost?

Vse sodobne različice priljubljenih brskalnikov, vključno z IE9+, podpirajo več slik (lahko preverite na primer Caniuse).

Modernizr lahko uporabite tudi za zagotavljanje alternativnih rešitev za brskalnike, ki ne podpirajo več ozadij. Kot je zapisal Chris Coyier v svoji objavi o vrstnem redu plasti pri uporabi več ozadij, naredite nekaj takega:

Telo Multiplebgs ( /* Čudovite izjave več BG, ki presegajo realnost in imsourcess chicks */) .no-multiplebgs body ( /* laaaaaame backback */)
Če vas skrbi uporaba JS za zagotavljanje združljivosti za nazaj, lahko preprosto dvakrat deklarirate ozadje, čeprav ima to tudi svoje pomanjkljivosti v obliki možnega dvojnega nalaganja virov (to je odvisno od implementacije obdelave css v posameznem brskalniku):

/* več nadomestnih bg */ ozadje: #000 url(...) ...; /* Čudovite izjave več BG, ki presegajo resničnost in nenavadne ženske */ url ozadja(...), url(...), url(...), #000 url(...);

Če ste že začeli razmišljati o sistemu Windows 8, ne pozabite, da lahko pri razvoju aplikacij v slogu metro uporabite več ozadij, saj uporablja isti motor kot IE10.

P.s. O temi: Ne morem si kaj, da se ne bi spomnil fenomenalnega članka o .

Danes bomo delali na slikah ozadja, ki so nastavljene z uporabo lastnosti ozadja in njenih dodatnih vrednosti. Oglejmo si nekaj praktičnih primerov namestitve več ozadij za isti element.

To je lahko koristno v številnih primerih in trenutkih. Še posebej uporaba psevdo elementov v tem primeru, saj so parametri zelo prilagodljivi.

Veliko slik za ozadje

Da ne bi ustvarili bloka v bloku, je najlažje, da glavnemu elementu dodate eno vrstico pravil in tako dobite želeni rezultat. To lahko štejemo za lakonično možnost, še posebej, ker odpravlja potrebo po ponovnem iskanju vir. Vse bo narejeno samo s CSS.

Blockimg(ozadje: url("img/img2.png"),/*najvišje ozadje in nato zaporedno*/ url("img/img3.png"), url("img/img1.jpg"); položaj ozadja: 370px center, 120px 150px, center center;/*položaj slik*/ background-repeat: no-repeat;/*ponavljanje slike*/ background-color: #444;/*če je potrebna barva ozadja*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) /*skrajšana različica*/. blockimg ( ozadje: url("img/img2.png") brez ponavljanja 370px center, url("img/img3.png") no-repeat 120px 150px, url("img/img1.jpg") brez ponavljanja center sredina; rob: 100 slikovnih pik, samodejno 15 slikovnih pik; velikost polja: obroba; oblazinjenje: 25 slikovnih pik; širina: 700 slikovnih pik; najmanjša višina: 300 slikovnih pik; )

Razlaga. Elementu damo sliko ozadja, ki označuje pot do njegove lokacije. Ločeno z vejicami imamo možnost vnesti veliko več ozadij, kot je razvidno iz zgornje kode. Vrstni red njihovih številk določa, katera slika bo na vrhu drugih. To pomeni, da je prvo ozadje višje od vseh ostalih, nato pa zaporedje sledi načelu običajnega grafičnega urejevalnika.

Nato se preko posameznih lastnosti določijo dodatni parametri: položaj, ponavljanje, velikost in po potrebi barva. Upoštevajte tudi, da so vsi parametri zapisani ločeno z vejicami, v enakem vrstnem redu kot številka slike.

In še zadnja podrobnost. Celotno kodo je mogoče skrajšati z uporabo samo ene generične lastnosti, ozadja. V primeru kode je druga možnost, ki prikazuje, kako se to naredi.

Slika ozadja prek psevdo elementa

Ne pozabite tudi na alternativne možnosti kot taki so psevdoelementi pred in po. Njihova uporaba ima pozitivno prednost - sliko je mogoče premakniti čez rob elementa, tako da ne izgine na meji, ampak je na njej. Ta tehnika vam bo prišla prav, če boste morali ustvariti nekaj podobnega 3D učinku.

Blockimg( ozadje: url("img/img1.jpg") brez ponavljanja;/*ozadje elementa*/ položaj:relativno;/*območje pozicioniranja*/ rob: 200 slikovnih pik samodejno 15 slikovnih pik; velikost polja: obrobno polje; oblazinjenje: 25px; širina:700px; najmanjša višina: 300px; ) .blockimg::before(ozadje: url("img/img1.png") brez ponavljanja center center; dno: 0; vsebina: ""; višina: 295px; levo: 0; položaj: absolutno;/*absolutno pozicioniranje*/ desno: 0; zgoraj: -150px; )

Razlaga. Pravzaprav je vse zelo preprosto. Ozadje glavnemu elementu nastavimo na običajen način. Sledi položaj ključne lastnosti: relativno; , ki določa območje za premikanje drugega elementa, ki je v glavnem elementu in ima lastnost position:absolute; .

Namesto drugega elementa, čeprav gre formalno kot ločeno področje, uporabljamo psevdoelement. Damo mu absolutni položaj in ga postavimo na mesto, ki ga potrebujemo.