A mund të përdor shumë imazhe të sfondit? Si të rreshtoni një imazh të sfondit në të djathtë.

Një pjesë e rëndësishme e dizajnit të uebit janë prejardhjet CSS. Karakteristikat e sfondit përmbajnë ngjyra dhe imazhe që shërbejnë si sfond i përmbajtjes dhe janë përgjegjës për estetikën e faqes. Hiq Sfondet CSS nga faqja juaj, dhe me shumë mundësi do të shfaqet si tekst në një sfond të bardhë.

Duke qenë relativisht e lehtë për t'u kuptuar, Sfondet CSS Megjithatë, ato mund të shkaktojnë keqkuptime dhe të ngrenë një sërë çështjesh kur punoni në detyra specifike. Ne do të përpiqemi të sqarojmë këtë keqkuptim dhe t'u përgjigjemi pyetjeve që lindin gjatë zgjidhjes së problemeve specifike.

Cilat janë prejardhjet CSS?

Në thelb, emri i prejardhjeve CSS përmban përkufizimin e tyre. Kjo është ajo që shtoni në sfondin e një elementi. Më saktësisht, ato janë ngjyra ose imazhi i vendosur pas përmbajtjes që është shtuar brenda elementit. Kur dizajnoni një faqe interneti të bazuar në CSS, këto ngjyra dhe imazhe zakonisht janë përgjegjëse për shumicën e dizajnit në shabllonin tuaj.

Sfondi i elementit përshkruhet sipas model blloku CSS. Margjinat nuk janë pjesë e sfondit, por kufijtë, mbushja dhe gjerësia e përmbajtjes janë pjesë e sfondit.

Ekzistojnë 5 veçori të sfondit që vlejnë Zgjedhësi CSS, 4 prej të cilave vlejnë për imazhet e sfondit:

Background-color - – vendos ngjyrën e sfondit të elementit. Ngjyra mund të vendoset në hex, rgb ose një nga emrat e kufizuar të ngjyrave. Gjithashtu, ngjyra e sfondit mund të vendoset në transparente ose të trashëgojë një vlerë elementi prind. Për më shumë detaje, shihni artikullin Background-image - vendos imazhin si sfond të elementit dhe vlera e tij duket si url ("rruga-te-imazh"). Vetia e imazhit të sfondit gjithashtu mund të ketë vlerat none dhe të trashëgojë . Përsëritja e sfondit (përsëritja e sfondit) - vendos një përsëritje të imazhit të sfondit. Vlerat: përsëritje, pa përsëritje, përsëritje-x, përsëritje-y dhe trashëgim. Sfondi-bashkëngjitje - - përcakton se si aplikacioni i sfondit do të lëvizë me faqen. Mund të lëvizë (lëviz, kur faqja lëviz, lëviz me elementin, vlera e paracaktuar), mbetet fikse (fikse, mbetet fikse në rastin kur faqja lëviz) ose trashëgon vlerën e elementit prind. Background-position - Vendos pozicionin fillestar të imazhit të sfondit në element. Vetia background-position ka dy vlera, pozicion horizontal (mund të jetë majtas, qendër, djathtas) dhe pozicion vertikal (mund të jetë lart, qendër, poshtë). Pozicioni i sfondit mund të vendoset gjithashtu në një % të këndit të sipërm majtas të elementit.

Reduktimi i rregullave të sfondit CSS

Është e mundur të vendosni secilën veçori të sfondit individualisht, por në praktikë është më mirë ta thjeshtoni këtë. Në këtë rast, vetitë duhet të vendosen në rendin e mëposhtëm: ngjyra, imazhi, përsëritja, aplikimi, pozicioni (ngjyra, imazhi, përsëritja, bashkëngjitja, pozicioni).

Div (sfondi: #0088ff, url ("rruga-te-an-imazh"), përsërit-x, lëviz, majtas lart}

Me këtë thjeshtësim, nuk keni nevojë të vendosni të gjitha vetitë, por ju duhet të përdorni rendin e duhur. Karakteristikat që nuk i specifikoni do të kenë vlerat e mëposhtme të paracaktuara:

• ngjyra e sfondit: transparente
• sfond-imazh: asnjë
• sfond-përsërit: përsërit
• sfond-bashkëngjitje: lëviz
• pozicioni i sfondit: 0% 0%

Një shembull i një shënimi stenografi është treguar më poshtë:

Sfondi: #0077ff sfondi: url ("rruga-te-imazhi") sfondi pa përsëritje: url ("rruga-te-imazhi") lart majtas

Në secilën prej rreshtave të kodit të mësipërm, vlerat e paracaktuara do të përdoren për vetitë që nuk janë caktuar në mënyrë specifike.

Imazhet e sfondit CSS nuk janë imazhe HTML

Është e rëndësishme të kuptohet se imazhet e specifikuara me duke përdorur CSS sfondet sillen ndryshe nga imazhet e specifikuara duke përdorur etiketën .

Etiketa img krijon bllok i ri. Imazhi i sfondit CSS vendoset brenda bllokut ekzistues. Ju nuk mund të shtoni margjina, një kufi ose një sfond në një imazh të sfondit CSS. Gjithashtu, një imazhi të sfondit CSS nuk mund t'i jepet gjerësia dhe lartësia.

Meqenëse një imazh në html është një bllok i ri (një bllok inline, domethënë është i mbështjellë rreth elementeve të tjerë), ai ka një gjerësi dhe lartësi, mbushje dhe margjina, si dhe një kufi. Për më tepër, për të etiketa img mund të aplikohet imazhi i sfondit CSS. Nuk e di sa shpesh përdoret kjo në praktikë, por nëse dëshironi, mund të shtoni një imazh të sfondit pas imazhit.

Përgjigjet për pyetjet e zakonshme

Edhe pse vetia e sfondit është relativisht e lehtë për t'u përdorur dhe kuptuar, puna me të mund të ngre ende një sërë pyetjesh.

1. Pse nuk shfaqet imazhi i sfondit?

Kjo është zakonisht për shkak të faktit se elementi nuk ka as gjerësi dhe as lartësi. Mos harroni se një imazh i sfondit nuk krijon një bllok, por përkundrazi plotëson një ekzistues. Nëse ky bllok nuk ka as gjerësi dhe as lartësi, thjesht nuk ka asgjë për të mbushur. Zgjidhja qëndron në dhënien e dimensioneve të elementit. Ju mund t'i jepni elementit (jo imazhit të sfondit) një lartësi dhe gjerësi, ose ta mbushni elementin me përmbajtje, ku gjerësia dhe lartësia krijohen vetë.

Në disa raste, një element mund të përmbajë përmbajtje që është aplikuar pronë notuese, e cila nxjerr përmbajtjen jashtë rrjedhës kryesore të dokumentit. Në këtë rast, elementi që përmban përmbajtjen (ku duan të shtojnë një sfond) zyrtarisht nuk ka dimensione. Në mënyrë që një element të ketë dimensione (në mënyrë që përmbajtja në të cilën aplikohet vetia float të mos duket se del nga rrjedha kryesore e dokumentit), duhet të zbatohet veçoria overflow në të.

2. A mund të përdor shumë imazhe të sfondit?

Po dhe jo. Specifikimi CSS3 ju lejon të përdorni imazhe të shumta të sfondit, megjithatë, pasi jo të gjithë shfletuesit udhëhiqen plotësisht nga ky specifikim, është më mirë të ndaloni përdorimin e imazheve të shumta.

Duhet të mbani mend gjithashtu se mund të aplikoni një sfond për të gjithë elementët HTML. Le të themi se keni një div që përmban një h2 dhe një paragraf. Ju mund të aplikoni imazhe sfondi në secilën prej tyre dhe, duke kontrolluar vetitë e tjera CSS, mund të arrini atë që dëshironi!!! efekt. Ju gjithashtu mund të futni div dhe hapësira shtesë brenda dhe jashtë elementit, të cilat do të krijojnë më shumë elementë të cilëve mund t'u shtoni një sfond. Kjo qasje është mjaft e rëndë, por funksionon.

3. Si të ndërroni imazhet e sfondit kur vendosni miun mbi një element?

Ka dy mënyra. Ju duhet të shtoni një rregull të ri në elementin me pseudo-class:hover në mënyrë që të tregojë (background-imazh) në një imazh të ri, ose ta bëjë imazhin të duket si Sprite CSS dhe ndryshoni pozicionin e tij të sfondit për të treguar një pjesë të ndryshme të spritit.

Është e rëndësishme të theksohet se versionet më të vjetra të IE nuk mbështesin pseudo-class:hover natyrshëm, kështu që që këto metoda të funksionojnë në IE do t'ju duhet pak javascript. Unë preferoj të përdor zgjidhjen e peshkut pinjoll, të njëjtën zgjidhje që përdor për menutë me rënie.

4. Si të bëhen transparente imazhet e sfondit?

Ju mund të shtoni transparencë në një imazh kur e krijoni atë në Photoshop. Në këtë rast, lloji i imazhit mund të ndryshohet, por ju ende nuk do të jeni në gjendje ta shihni atë.

5. A mund të vendos një imazh të sfondit në një tabelë, rresht tabele ose qelizë tabele?

Po. Këta janë të gjithë elementë html, kështu që ata mund të marrin vetitë e sfondit. Megjithatë, sfondet e tabelave kanë rrugën e vështirë përkufizimi që përdor shtresa dhe transparencë siç tregohet në imazhin më poshtë:

Sfondi i një elementi në një shtresë është i dukshëm vetëm nëse sfondi i shtresave mbi të është transparent. Kjo mund të duket mjaft konfuze, prandaj shumë njerëz preferojnë të përdorin atributet html kur krijojnë sfonde për tabela.

Për fat të mirë, vlera e transparencës është vendosur në parazgjedhje, kështu që shtresat e mësipërme duhet të jenë tashmë transparente. Megjithatë, sapo të filloni të shtoni sfonde në një pjesë të tabelës, arrini funksionimin e duhur mund të jetë mjaft e vështirë

.

6. A është e mundur të shtoni një imazh të sfondit në kufijtë?

Ende jo. Kjo pronë është premtuar të zbatohet në CSS3. Nëse nuk e keni problem që nuk do të funksionojë në shumë shfletues, mund ta përdorni tani.

7. A mund të shtoj imazhe të sfondit në lista?

Po. Listat janë të njëjtat elementë html, kështu që ato mund të pranojnë imazhe të sfondit. Një imazh i sfondit mund të përdoret lehtësisht si një pikë për një listë. Unë mendoj se nuk do të ketë vështirësi me këtë.

8. Si të shtoni mbushje në një imazh të sfondit?

Siç e përmenda më herët, një imazh i sfondit nuk krijon një bllok të ri CSS, kështu që nuk mund të shtoni një sfond në të. Në vend të kësaj, ju duhet të përdorni veçorinë e pozicionit të sfondit për të kompensuar imazhin e sfondit që rezulton. Ka edhe metoda të tjera.

9. Si të rreshtoni një imazh të sfondit në të djathtë.

Ngjashëm me pyetjet e mëparshme, përgjigja lidhet me pozicionin e sfondit. Përdorni vlerën e duhur për veçorinë background-position (background-position:right;) dhe imazhi do të rreshtohet në skajin e djathtë të elementit.

10. Pse nuk shfaqet imazhi i sfondit kur printohet?

Nuk ka asnjë kontroll mbi këtë pronë për një arsye të mirë. Duhet shumë bojë për të printuar një imazh, kështu që shumë njerëz zgjedhin të mos e printojnë atë. Nëse do të printohet apo jo një imazh caktohet individualisht në shfletues. Unë rekomandoj të lini gjithçka ashtu siç është, por nëse vendosni të printoni, këtu është një mënyrë për të anashkaluar ndalimin e printimit të imazheve në sfond justaddwater.dk/2009/09/29/print-css-background-logo-hack/ .

11. Si mund ta zgjas një imazh të sfondit për t'iu përshtatur një elementi?

Tek të tjerët zgjidhje e mundshme shërben për të krijuar një imazh që është shumë më i madh se sa duhet dhe pozicioni i sfondit është vendosur në 50% 50%. Në këtë mënyrë imazhi i sfondit do të përqendrohet brenda elementit dhe ndërsa gjerësia e elementit rritet, më shumë foto bëhet e dukshme. Imazhi do të mbetet në qendër.

Nuk shtrihet saktësisht, por siguron që imazhi të mbushë hapësirën ndërsa hapësira bëhet më e madhe.

12. A është e mundur të mbështillni një lidhje rreth një imazhi të sfondit?

Nr. Edhe një herë, imazhet e sfondit nuk krijojnë blloqe. Zgjidhja do të ishte shtimi i një lidhjeje rreth gjithë përmbajtjes brenda elementit html, ose mbështjellja e lidhjes rreth vetë elementit. Zgjedhja e opsionit varet nga elementi html dhe përmbajtja brenda këtij elementi.

konkluzioni

Shpresoj se ky artikull do t'ju ndihmojë të zgjidhni problemet që mund të lindin kur punoni me të sfond Karakteristikat e CSS , ose zgjidhni problemin tuaj. E rëndësishme të mbani mend, Sfondet CSS mos krijoni blloqe të reja. Ata mbushin vetëm blloqet ekzistuese html. Kuptimi i kësaj do t'ju ndihmojë të përcaktoni se çfarë mund dhe nuk mund të bëni me imazhet e sfondit.

Sfondet CSS luajnë një rol kyç në ndikimin që dizajni juaj ka tek përdoruesi. Shumica e imazheve që krijoni për faqen tuaj do të vendosen duke përdorur veçorinë e sfondit, kështu që kjo është gjëja e parë që duhet të zotëroni.

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

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.

• 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? Është shumë e thjeshtë: për çdo imazh të sfondit, krijohet një bllok, të cilit i caktohet imazhi 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) përsëritje-x lart majtas; ) .sample1 .mermaid ( 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 : 30px; lart: 90px; pozicioni: absolute; ) .sample1 .peshkimi ( sfondi: url(media/fishing.svg) pa përsëritje lart djathtas 10px; )

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