Reduktimi i rregullave CSS në lidhje me sfondin. Pse nuk shfaqet imazhi i sfondit?

Ju mund të shtoni imazhe të shumta sfondi në një element në të njëjtën kohë përmes një vetie të vetme të sfondit. Kjo ju lejon të kaloni me një element për të krijuar sfond kompleks ose një fotografi, duke e shfaqur atë disa herë me cilësime të ndryshme. Të gjitha imazhet me parametrat e tyre renditen të ndara me presje, me imazhin që shfaqet në krye të imazheve të tjera të treguar i pari, dhe i fundit, përkatësisht, imazhi më i ulët. Shembulli 1 tregon se si të krijoni një sfond me tre imazhe.

Shembull 1. Tre prejardhje

Nëse ju duhet të vendosni veçmas disa veçori të stilit për sfondin, si madhësia e sfondit si në shembullin e mësipërm, atëherë parametrat për çdo sfond renditen të ndara me presje. Rezultati i këtij shembulli është paraqitur në Fig. 1.

Oriz. 1. Sfondi me tre imazhe

Imazhet individuale të sfondit ju lejojnë të ndryshoni pozicionin e tyre dhe gjithashtu t'i animoni ato, siç tregohet në shembullin 2.

Shembulli 2: Sfondi i animuar

Le të shqyrtojmë tani se si të përdorim një fotografi për të krijuar një bllok me një kornizë (Fig. 2). Gjerësia e bllokut është fikse dhe lartësia ndryshon në varësi të vëllimit të përmbajtjes së bllokut.

Oriz. 2. Kornizë e vizatuar me dorë

Pjesa e sipërme dhe Pjesa e poshtme, e cila duhet të pritet në redaktues grafik dhe vendoseni atë horizontalisht. Pjesa e mesme zgjidhet në mënyrë që të përsëritet vertikalisht pa qepje. Fotografia ka një model të theksuar përsëritës, kështu që nuk duhet të ketë vështirësi për ta theksuar atë. Rezultati do të jetë një imazh i përgatitur (Fig. 3). Fusha me kuadrate tregon transparencën; ju lejon të vendosni një sfond me ngjyra së bashku me imazhet dhe ta ndryshoni lehtësisht atë përmes stileve.

Oriz. 3. Imazhi i përgatitur për sfond

Vetë sfondi shfaqet nga vetia e sfondit, e cila gjithashtu specifikon koordinatat e fragmentit të dëshiruar. Parametrat e çdo sfondi renditen të ndara me presje dhe in në këtë rast renditja e tyre ka rëndësi. Ne duam që pjesa e sipërme dhe e poshtme e bllokut të mos mbivendosen, kështu që i vendosim ato në fillim (shembulli 3). Ngjyra e sfondit specifikohet e fundit.

Shembulli 3. Disa fotot e sfondit

Sfondi i parë shfaq kufirin e sipërm të bllokut, sfondi i dytë - fundi dhe i treti - kufijtë vertikalë. E fundit është ngjyra që shihet në pjesën qendrore transparente të bllokut (Fig. 4).

• Tutorial

Ne kemi prekur tashmë aftësitë e modulit CSS3 Sfondet dhe Kufijtë, duke parë punën me hijet (). Sot do të flasim pak për një tjetër mundësi interesante- duke përdorur imazhe të shumta në sfond.

Përbërja e sfondit

Ka shumë arsye pse mund të dëshironi të kompozoni imazhe të shumta në sfond, më të rëndësishmet prej të cilave janë:

• duke kursyer trafikun në madhësinë e imazheve, nëse imazhet individuale peshojnë më pak se një imazh me shtresa të rrafshuara, dhe
• nevoja për sjellje të pavarur të shtresave individuale, për shembull, kur zbatohen efektet paralaks.

Mund të ketë arsye të tjera të arsyeshme :)

Qasje klasike

Pra, ne duhet të vendosim disa imazhe sfondi njëra mbi tjetrën. Si zgjidhet zakonisht ky problem? Shumë e thjeshtë: për secilën imazhi i sfondit krijohet një bllok dhe i caktohet një imazh përkatës i sfondit. Blloqet ose futen brenda njëri-tjetrit ose vendosen në një rresht me rregulla të përshtatshme pozicionimi. Ja një shembull i thjeshtë:

Një bllok me klasën "peshkim" brenda "mermaid" është vetëm për qëllime demonstrimi.

Tani disa stile:
.sample1 .sea, .sample1 .mermaid, .sample1 .peshkimi ( lartësia:300px; gjerësia:480px; pozicioni: relative; ) .sample1 .deti ( sfondi: url(media/deti.png) repeat-x majtas lart; ) .sample1 .sirmaid ( sfond: url(media/mermaid.svg) përsëritje-x poshtë majtas; ) .sample1 .fish ( sfond: url(media/fish.svg) pa përsëritje; lartësi: 70 px; gjerësi: 100 px; majtas: 30 px; lart: 90 px; pozicioni: absolut; ) .sample1 .peshkimi ( sfondi: url(media/fishing.svg) pa përsëritje lart djathtas 10 px; )

Rezultati:

NË në këtë shembull tre sfonde të mbivendosur dhe një bllok me peshq të vendosur pranë blloqeve të "sfondit". Në teori, peshqit mund të zhvendosen, për shembull, me duke përdorur JavaScript ose CSS3 Tranzicione/Animacione.

Nga rruga, ky shembull për ".fishing" përdor sintaksën e re për pozicionimin e sfondit, të përcaktuar gjithashtu në CSS3:
sfond: url(media/fishing.svg) pa përsëritje lart djathtas 10px;
Aktualisht mbështetet në IE9+ dhe Opera 11+, por nuk mbështetet në Firefox 10 dhe Chrome 16. Kështu që përdoruesit e dy shfletuesve të fundit nuk do të mund ta kapin ende peshkun.

Prejardhje të shumta

Vjen në shpëtim opsion i ri, shtuar në CSS3, është aftësia për të përcaktuar imazhe të shumta të sfondit për një element. Duket kështu:

Dhe stilet përkatëse:
.sample2 .sea (lartësia:300px; gjerësia:480px; pozicioni: relative; sfondi-imazhi: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/deti. png"); pozicioni i sfondit: lart djathtas 10 px, poshtë majtas, lart majtas; sfond-përsëritje: pa përsëritje, përsëritje-x, përsëritje-x; ) .sample2 .fish ( sfond: url ("media/fish.svg ") pa përsëritje; lartësia: 70 px; gjerësia: 100 px; majtas: 30 px; lart: 90 px; pozicioni: absolute; )
Për të përcaktuar imazhe të shumta, duhet të përdorni rregullin e imazhit të sfondit, duke renditur imazhet individuale të ndara me presje. Rregulla shtesë, gjithashtu si listë, mund të vendosni pozicionimin, përsëritjet dhe parametra të tjerë për çdo imazh. Vini re rendin në të cilin janë renditur imazhet: shtresat renditen nga e majta në të djathtë nga pjesa e sipërme deri në fund.

Rezultati është saktësisht i njëjtë:

Një rregull

Nëse peshqit nuk kanë nevojë të ndahen në një bllok të veçantë për manipulimet e mëvonshme, e gjithë fotografia mund të rishkruhet me një rregull i thjeshtë:

Stilet:
.sample3 .sea (lartësia:300px; gjerësia:480px; pozicioni: relative; sfond-imazh: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/peshk. svg"), url ("media/sea.png"); pozicioni i sfondit: lart djathtas 10 pikselë, poshtë majtas, 30 pikselë 90 px, lart majtas; përsëritja e sfondit: pa përsëritje, përsëritje-x ;)

Unë nuk do të tregoj një foto të rezultatit - më besoni, ajo përkon me dy fotot e mësipërme. Por kushtojini vëmendje stileve përsëri, veçanërisht "përsëritja e sfondit" - sipas specifikimit, nëse një pjesë e listës në fund mungon, atëherë shfletuesi duhet të përsërisë listën e specifikuar numrin e kërkuar të herëve për të përputhur numrin e imazheve në listë.

Në këtë rast, është e barabartë me këtë përshkrim:
sfond-përsëritje: pa përsëritje, përsërit-x, pa-përsëritje, përsërit-x;

Edhe më e shkurtër

Nëse ju kujtohet CSS 2.1, ai përcaktoi aftësinë për të përshkruar imazhet e sfondit në një formë të shkurtër. Po imazhe të shumta? Kjo është gjithashtu e mundur:

Sample4 .sea (lartësia:300px; gjerësia:480px; pozicioni: relative; sfondi: url("media/fishing.svg") lart djathtas 10px pa përsëritje, url("media/mermaid.svg") poshtë majtas përsëritje-x , url("media/fish.svg") 30px 90px pa përsëritje, url("media/sea.png") përsëritje-x;)

Por vini re se tani nuk mund të kaloni vetëm vlerat (përveç nëse ato përputhen me vlerën e paracaktuar). Nga rruga, nëse doni të vendosni ngjyrën e imazhit të sfondit, kjo duhet të bëhet në shtresën e fundit.

Imazhe dinamike

Nëse përbërja është statike ose dinamike maksimumi në varësi të madhësisë së kontejnerit, atëherë sfondet e shumta thjeshtojnë qartë dizajnin e faqes. Por, çka nëse duhet të punoni me elementë individualë të përbërjes në mënyrë të pavarur nga javascript (lëviz, lëviz, etj.)?

Nga rruga, këtu është një shembull nga jeta - një temë me një luleradhiqe në Yandex:


Nëse shikoni kodin, do të shihni diçka si kjo:

...

Blloqet me klasat "b-fluff-bg", "b-fluff__cloud" dhe "b-fluff__item" përmbajnë imazhe sfondi që mbivendosen me njëra-tjetrën. Për më tepër, sfondi me retë lëviz vazhdimisht, dhe luleradhiqe fluturojnë nëpër ekran.

A mund të rishkruhet kjo duke përdorur sfonde të shumta? Në parim, po, por i nënshtrohet 1) mbështetjes për këtë veçori në shfletuesit e synuar dhe... 2) lexoni më tej;)

Si të shtoni dinamikë në sfonde të shumta? Në një situatë të tillë, rezulton të jetë e përshtatshme që në përfaqësimin e brendshëm shfletuesi shpërndan parametrat individualë të imazheve të sfondit sipas rregullave të duhura. Për shembull, për pozicionimin ekziston "pozita e sfondit", dhe për ndërrime mjafton të ndryshohet vetëm kjo. Megjithatë, ka një kosto për përdorimin e imazheve të shumta - ky rregull (dhe çdo i ngjashëm) kërkon që ju të listoni pozicionin për të gjitha sfondet e përcaktuara për bllokun tuaj, dhe ju nuk mund ta bëni këtë në mënyrë selektive.

Për të shtuar animacion në sfondin tonë të peshkut, mund të përdorni kodin e mëposhtëm:
$(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; funksioni animationLoop() (fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenëX = 0; peshkY = -10 + (10 * Math.cos(t * 0.091)); peshkX = 10 + (5 * Math.sin(t * 0.07)); sea.style.backgroundPosition = "lart " + fishY + "px djathtas " + fishX + "px, " + mermaidX + "px fund," + fishesX + "px " + fishesY + "px, lart majtas"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Ku
dritare.questanimframe = (funksioni () (dritarja e kthimit.RequestAnimationFrame || dritare.msRequestAnimationFrame || dritare.mozRequestAnimationFrame || dritare. );)); ))();

Dhe nga rruga, animacionet mund të bëhen gjithashtu duke përdorur Tranzicione/Animacione CSS3, por kjo është një temë për një diskutim më vete.

Paralaksa dhe interaktiviteti

Më në fund, manovra të ngjashme mund të shtojnë lehtësisht efekte paralaks ose ndërveprim ndërveprues me sfondin:

Imazhet e shumta të sfondit janë të dobishme në skenarë të tillë, pasi ndërsa flasim vetëm për sfondin (dhe jo përmbajtjen), përdorimi i tyre na lejon të shmangim ndotjen e kodit html dhe DOM-it. Por gjithçka ka një çmim: nuk mund t'i drejtohem elemente individuale kompozime me emër, id, klasë ose ndonjë parametër tjetër. Më duhet të kujtoj në mënyrë eksplicite rendin e elementeve në përbërje në kod, dhe për çdo ndryshim në çdo parametër të çdo elementi, në fakt, duhet të ngjis së bashku një rresht që përshkruan vlerat e këtij parametri për të gjithë elementët dhe ta përditësoj atë për gjithë përbërjen.

Sea.style.backgroundPosition = "lart " + fishY + "px djathtas " + fishX + "px, " + mermaidX + "px fund," + fishesX + "px " + fishesY + "px, lart majtas";

Jam i sigurt që kjo mund të përmbyllet kod i përshtatshëm në javascript, i cili do të marrë përsipër virtualizimin e marrëdhënieve me shtresa individuale, duke lënë sa më të pastër kodin html të faqes.

Po përputhshmëria?

Të gjitha versionet moderne shfletues të njohur, duke përfshirë IE9+, mbështesin imazhe të shumta (mund të kontrolloni, për shembull, me caniuse).

Ju gjithashtu mund të përdorni Modernizr për të ofruar shfletues që nuk mbështesin sfonde të shumëfishta zgjidhje alternative. Siç shkroi Chris Coyier në postimin e tij në lidhje me renditjen e shtresave kur përdorni sfonde të shumta, bëni diçka si kjo:

Trupi i shumëfishtë ( /* Deklarata mbresëlënëse të shumëfishta BG që e kapërcejnë realitetin dhe rrëmbejnë zogjtë */ ) .no-multiplebgs body ( /* laaaaaame backback */ )
Nëse jeni të hutuar në lidhje me përdorimin e JS për të ofruar përputhshmëria e prapambetur, ju thjesht mund të deklaroni sfond dy herë, megjithatë, kjo ka edhe disavantazhet e saj në formën e mundshme çizme e dyfishtë burimet (kjo varet nga zbatimi i përpunimit css në një shfletues të veçantë):

/* kthim i shumëfishtë bg */ sfond: #000 url(...) ...; /* Deklarata mbresëlënëse të shumta të BG-së që e kapërcejnë realitetin dhe rrëmbejnë zogjtë */ url në sfond (...), url (...), url (...), #000 url (...);

Nëse tashmë keni filluar të mendoni për Windows 8, mbani në mend se mund të përdorni sfonde të shumta kur zhvilloni aplikacione të stilit metro, pasi ai përdor të njëjtin motor si IE10.

P.s. Në temë: Nuk mund të mos kujtoj artikullin fenomenal rreth .

Etiketa:

• css3
• prejardhje të shumta
• kufijtë dhe sfondet

Shto etiketa

Në CSS 2, është e pamundur të shtoni dy sfonde në një element në të njëjtën kohë, kështu që ju duhet të futni një element brenda tjetrit dhe t'i jepni secilit imazhin e tij të sfondit. Për paraqitjet komplekse, bashkëngjitjet e tilla ndonjëherë mund të numërohen në rreth një duzinë. Është e qartë se një grumbullim i tillë nuk çon në asgjë të mirë, por çfarë të bëjmë? Rezulton se ka diçka! Në CSS 3 mund të shtoni shumë imazhet e sfondit për çdo element. Pra, marrim vizatimin e bllokut (Fig. 1), e presim në copa dhe fillojmë ta testojmë në shfletues.

Oriz. 1. Blloko për sitin

Për thjeshtësi, unë do të marr gjerësinë e bllokut madhësi fikse, dhe lartësia do të shtrihet në varësi të përmbajtjes. Pjesët e sipërme dhe të poshtme janë qartë të dukshme në vizatim; i preva në redaktues dhe i palosja në shtresa në një skedar të veçantë. Pjesa e mesme duhet të zgjidhet në mënyrë që të përsëritet vertikalisht pa qepje. Dizajni ka një model përsëritës të përcaktuar mirë, kështu që nuk duhet të ketë vështirësi për ta theksuar atë. Unë kopjoj dhe ngjis në fragmentet e mëparshme. Rezultati do të jetë një foto si kjo (Fig. 2).

Oriz. 2. Imazhe të përgatitura

Në parim, ju mund ta ruani çdo fragment si skedar të veçantë, por spritet CSS (e ashtuquajtura teknologji e ngjitjes së disa imazheve në një) kanë një sërë përparësish. Së pari, numri i kërkesave në server zvogëlohet për shkak të zvogëlimit të numrit të skedarëve dhe, së dyti, fotografitë ngarkohen dhe shfaqen më shpejt në total.

Vetë sfondi shfaqet nga vetia e sfondit, e cila gjithashtu specifikon koordinatat e fragmentit të dëshiruar. Parametrat e çdo sfondi renditen të ndara me presje dhe në këtë rast renditja e tyre ka rëndësi. Dua që pjesa e sipërme dhe e poshtme e bllokut të mos mbivendosen, kështu që i vendos ato në fillim (shembulli 1).

Shembull 1. Disa imazhe të sfondit

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

Sfondi i parë shfaq kufirin e sipërm të bllokut, sfondi i dytë - fundi dhe i treti - kufijtë vertikalë.

Ne kontrollojmë shfletuesit. Internet Explorer 8 nuk shfaqi fare foto, shfletuesit e tjerë (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) e shfaqën saktë kornizën (Fig. 3).

Oriz. 3. Pamja e kornizës në shfletuesin Safari

Përdorimi i sfondeve të shumta e bën situatën shumë më të lehtë për zhvilluesit, veçanërisht kur vendosen blloqe. Ka mbetur vetëm një gjë e vogël. Është e nevojshme që shfletuesi IE 6-8 të pushojë së ekzistuari.