Si të rreshtoni një imazh të sfondit në të djathtë. Çfarë ndodh me përputhshmërinë?

Në CSS 2, shtimi i dy sfondeve në një element në të njëjtën kohë është jorealiste, kështu që ju duhet të futni një element brenda një tjetri dhe të vendosni imazhin tuaj të sfondit për secilin. Për paraqitjet komplekse të bashkëngjitjeve të tilla, ndonjëherë mund të numëroni rreth një duzinë. Është e qartë se një grumbull i tillë nuk çon në asgjë të mirë, por çfarë të bëjmë? Rezulton se ka diçka! Në CSS 3, mund të shtoni disa në të njëjtën kohë fotot e sfondit për çdo element. Pra, marrim vizatimin e bllokut (Fig. 1), e presim në copa dhe fillojmë të testojmë në shfletues.

Oriz. 1. Blloko për sitin

Për thjeshtësi, do të marr gjerësinë e bllokut madhësi fikse, dhe lartësia do të shtrihet në bazë të përmbajtjes. Figura tregon qartë pjesët e sipërme dhe të poshtme, e preva në redaktues dhe e palos në shtresa në një skedar të veçantë. Pjesa e mesme duhet të zgjidhet në mënyrë që të përsëritet pa qepje vertikalisht. Vizatimi ka një zbukurim përsëritës të përcaktuar mirë, kështu që nuk duhet të ketë vështirësi në nxjerrjen në pah. Unë kopjoj dhe ngjis në fragmentet e mëparshme. Si rezultat, ne marrim një pamje të tillë (Fig. 2).

Oriz. 2. Imazhe të përgatitura

Në parim, çdo fragment mund të ruhet si skedar të veçantë, por spritet CSS (e ashtuquajtura teknologji për ngjitjen e 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, imazhet në total ngarkohen dhe shfaqen më shpejt.

Vetë sfondi shfaqet nga vetia e sfondit, e cila gjithashtu përcakton 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. Kërkoj pjesën e sipërme dhe Pjesa e poshtme blloku nuk u mbivendos, kështu që i vendosa ato në fillim (shembulli 1).

Shembulli 1. Disa fotot e 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 imazhe, 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

Me përdorimin e sfondeve të shumta, situata për zhvilluesit lehtësohet shumë, 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 më parë modulin CSS3 Backgrounds and Borders, duke parë punën me hijet (). Sot do të flasim pak për një tjetër mundësi interesante— përdorimi i disa imazheve 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 në total peshojnë më pak se një imazh me shtresa të rrafshuara, dhe
• nevoja për sjellje të pavarur të shtresave individuale, për shembull, gjatë zbatimit të efekteve paralaks.

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

Qasje klasike

Pra, duhet të vendosim disa imazhe të sfondit njëra mbi tjetrën. Si zgjidhet zakonisht ky problem? Shumë e thjeshtë: për secilën imazhi i sfondit krijohet një bllok, të cilit i caktohet imazhi përkatës i sfondit. Blloqet ose janë të folezuara ose të vendosura në një rresht me rregulla të përshtatshme pozicionimi. Këtu është një shembull i thjeshtë:

Blloku i klasës "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/fish.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ë këtë shembull, ka tre sfonde të mbivendosur dhe një kuti peshku pranë kutive të "sfondit". Në teori, peshqit mund të zhvendosen, për shembull, me JavaScript ose CSS3 Tranzicione/Animacione.

Rastësisht, ky shembull përdor sintaksën e re për pozicionimin e sfondit për ".fishing", 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 të kapin ende një peshk.

Prejardhje të shumta

Ndihma vjen opsion i ri, shtuar në CSS3, është aftësia për të përcaktuar imazhe të shumta sfondi për një element të vetëm në të njëjtën kohë. 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 imazhe individuale të ndara me presje. Rregulla shtesë, gjithashtu si listë, mund të vendosni pozicionimin, përsëritjet dhe parametra të tjerë për secilën prej imazheve. Kushtojini vëmendje renditjes në të cilën janë renditur imazhet: shtresat renditen nga e majta në të djathtë nga lart poshtë.

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 në një rregull i thjeshtë:

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

Unë nuk do të jap një foto me rezultatin - 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ëritjes së sfondit" - sipas specifikimeve, nëse një pjesë e listës në fund kapërcehet, atëherë shfletuesi duhet të përsërisë lista e specifikuar numrin e duhur të herëve që të përputhet me 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ërcakton 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 janë të njëjta 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 jo më shumë se në varësi të madhësisë së kontejnerit, atëherë sfondet e shumta thjeshtojnë qartë dizajnin e faqes. Por, çfarë 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 prejardhje 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ë paraqitjen e brendshme shfletuesi shpërndan parametrat individualë të imazhit të sfondit sipas rregullave të duhura. Për shembull, për pozicionimin ekziston "pozicioni i sfondit", dhe për ndërrime mjafton të ndryshohet vetëm ai. Megjithatë, ka një kosto për të përdorur imazhe të shumta - ky rregull (dhe çdo i ngjashëm) duhet të listojë pozicionin për të gjitha sfondet e vendosura për bllokun tuaj dhe nuk mund të bëhet në mënyrë selektive.

Për të shtuar animacion në sfondin tonë të peshkut, mund të përdorim 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
window.requestAnimFrame = (funksion() ( kthimi i dritares.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame.(callback. );)); ))();

Dhe, nga rruga, animacionet mund të bëhen edhe përmes Tranzicioneve / Animacioneve CSS3, por kjo është një temë për një diskutim më vete.

Paralaks dhe ndërveprues

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

Imazhet e shumta të sfondit janë të dobishme në këta skenarë, sepse për sa kohë që flasim vetëm për sfondin (dhe jo për përmbajtjen), përdorimi i tyre shmang rrëmujën e kodit html dhe DOM-it. Por ju duhet të paguani për gjithçka: Unë nuk mund të aplikoj për të elemente individuale kompozime me emër, id, klasë ose ndonjë parametër tjetër. 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 rreshtin 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 se mund të mbështillet kod i dobishë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.

Çfarë është me përputhshmërinë?

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

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ë një shënim 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 mund të deklaroni vetëm dy herë sfondin, megjithatë, kjo ka edhe të metat e saj në formën e një të 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 nuk sigurojnë burime */ 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 i njëjti motor përdoret nga brenda si në IE10.

P.s. Për këtë temë: Nuk mund të mos kujtoj një artikull fenomenal rreth .

Etiketa:

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

Shto etiketa

Ju mund të shtoni disa imazhe 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, në të njëjtën kohë, imazhi që shfaqet në krye të pjesës tjetër të imazheve tregohet i pari, dhe i fundit, përkatësisht, është imazhi më i poshtëm. Shembulli 1 tregon se si të krijoni një sfond me tre imazhe.

Shembull 1. Tre prejardhje

Nëse dëshironi të vendosni veçmas disa veçori stili 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 ky shembull treguar në fig. një.

Oriz. 1. Sfondi me tre imazhe

Imazhet e veçanta për sfondin ju lejojnë të ndryshoni pozicionin e tyre, si dhe të animoni, 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 shtrihet në varësi të vëllimit të përmbajtjes së bllokut.

Oriz. 2. Kornizë e vizatuar

Figura tregon qartë pjesët e sipërme dhe të poshtme që duhet të priten redaktori grafik dhe vendoseni atë horizontalisht. Pjesa e mesme zgjidhet në atë mënyrë që të përsëritet pa qepje vertikalisht. Fotografia ka një zbukurim të theksuar përsëritës, kështu që nuk duhet të ketë vështirësi në nxjerrjen në pah. Si rezultat, do të merret një imazh i tillë i përgatitur (Fig. 3). Kutia 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. Përgatitur për imazhin e sfondit

Vetë sfondi shfaqet nga vetia e sfondit, e cila gjithashtu përcakton 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. 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. Imazhe të shumta të sfondit

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

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

Ndërsa relativisht e lehtë për t'u kuptuar, prejardhja e CSS mund të jetë ende konfuze dhe të ngrenë pyetje 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 elementit. Më konkretisht, ato janë një ngjyrë ose imazh i vendosur prapa përmbajtjes që është shtuar brenda elementit. Kur dizajnoni një sajt 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.

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

Background-color (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ëgohet nga elementi prind. Më shumë detaje në artikullin Imazhi i sfondit (imazhi i sfondit) - vendos imazhin si sfond të elementit dhe vlera e tij duket si url ("rruga-te-imazhi"). 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 që imazhi i sfondit të përsëritet. Vlerat: përsëritje, pa përsëritje, përsëritje-x, përsëritje-y dhe trashëgim. Aplikimi i sfondit (background-atachment) - - vendos se si aplikacioni i sfondit do të lëvizë me faqen. Mund të lëvizë (lëvizë , lëviz me elementin ndërsa faqja rrotullohet, parazgjedhja), të qëndrojë fikse (fikse , qëndron e fiksuar kur faqja lëviz) ose të trashëgojë (trashëgojë) vlerën e elementit prind. Pozicioni i sfondit (pozicioni i sfondit) - vendos pozicionin fillestar të imazhit të sfondit në element. Vetia background-position ka dy vlera, pozicionin horizontal (mund të jetë majtas, qendër, djathtas) dhe pozicionin vertikal (mund të jetë lart, qendër, poshtë). Pozicioni i sfondit mund të vendoset gjithashtu si një % e këndit të sipërm majtas të elementit.

Reduktimi i rregullave CSS në lidhje me sfondin

Ju mund të vendosni secilën veçori të sfondit individualisht, por në praktikë është më mirë ta mbani të thjeshtë. 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-një-imazh"), përsëritje-x, lëviz, lart majtas)

Me këtë thjeshtim, nuk është e nevojshme të vendosni të gjitha vetitë, por ju duhet të përdorni rendin e duhur. Karakteristikat që nuk i vendosni ju do t'u caktohen 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ë shkurtimi tregohet më poshtë:

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

Në secilën nga rreshtat e mësipërm të kodit, 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 janë vendosur me duke përdorur CSS sfondet sillen ndryshe nga imazhet e përcaktuara me 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ë filigran në një imazh të sfondit CSS. Gjithashtu, një imazh i sfondit CSS nuk mund të vendoset në një gjerësi dhe lartësi.

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 dhe një kufi. Për më tepër, për të etiketa img mund të aplikohet sfondi imazh 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

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

1. Pse nuk shfaqet imazhi i sfondit?

Kjo zakonisht është për shkak të faktit se elementi nuk ka as gjerësi dhe as lartësi. Mos harroni se imazhi i sfondit nuk krijon një bllok, por 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 do të krijohen vetë.

Në disa raste, një element mund të përmbajë përmbajtje që është aplikuar në një element. pronë notuese A që nxjerr përmbajtjen nga rrjedha kryesore e dokumentit. Në këtë rast, elementi që përmban përmbajtjen (ku do të shtohet sfondi) është zyrtarisht i padimensionuar. Në mënyrë që elementi të ketë dimensione (në mënyrë që përmbajtja në të cilën zbatohet vetia float, pavarësisht se si del nga rrjedha kryesore e dokumentit), duhet të aplikoni prona e tejmbushjes.

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

Po dhe jo. Specifikimi CSS3 lejon imazhe të shumta të sfondit, por meqenëse jo të gjithë shfletuesit janë plotësisht në përputhje me këtë specifikim, është më mirë të prisni pak ndërsa përdorni imazhe të shumta.

Gjithashtu, mos harroni se mund të aplikoni një sfond për të gjithë elementët HTML. Le të themi se keni një div që përmban 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 shtrirje shtesë brenda dhe jashtë elementit, të cilat do të krijojnë më shumë elementë për të shtuar një sfond. Kjo qasje është mjaft e rëndë, por funksionon.

3. Si të ndërroni imazhet e sfondit kur rri pezull 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ë në (background-image) imazhin e ri, ose ta bëjë imazhin të duket si Sprite CSS dhe ndryshoni pozicionin e 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 e mbështesin pseudo-class :hover natyrshëm, kështu që nevojitet pak javascript për t'i bërë këto metoda të funksionojnë në IE. Unë preferoj të përdor zgjidhjen e peshkut pinjoll, të njëjtën zgjidhje që përdor për menutë e lëshimit.

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, pamja e figurës mund të ndryshohet, por ende nuk do të jetë e mundur të shihet përmes saj.

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

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

Sfondi i një elementi të një shtrese është i dukshëm vetëm nëse sfondi i shtresave mbi të është transparent. Kjo mund të duket mjaft konfuze, kjo është arsyeja pse shumë njerëz preferojnë të përdorin atributet html kur krijojnë sfonde të tabelës.

Për fat të mirë, vlera e transparencës është e paracaktuar, kështu që shtresat e mësipërme duhet të jenë tashmë transparente. Sidoqoftë, 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ë kufij?

Ende jo. Kjo pronë është premtuar të zbatohet në CSS3. Nëse nuk ju shqetëson 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. Imazhi i sfondit mund të përdoret lehtësisht si një pikë liste. Nuk mendoj se do të ketë ndonjë vështirësi.

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, përdorni veçorinë e pozicionit të sfondit për të lëvizur imazhin e sfondit që rezulton. Ka edhe mënyra të tjera.

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

Ashtu si pyetjet e mëparshme, përgjigja lidhet me pozicionin e sfondit. Përdorni një vlerë të së drejtës për vetinë e pozicionit të sfondit (background-position:right;) dhe imazhi do të rreshtohet në skajin e djathtë të elementit.

10. Pse imazhi i sfondit nuk shfaqet në pamjen e printuar?

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ë zgjedhin të mos e printojnë atë. Printimi ose mos printimi i imazhit vendoset në shfletues individualisht. Unë rekomandoj ta lini ashtu siç është, megjithatë nëse vendosni të printoni, ja 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 të shtrihet imazhi i sfondit për t'iu përshtatur elementit?

Të tjera zgjidhje e mundshmeështë krijimi i një imazhi që është shumë më i madh se sa dëshironi, 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 gjithçka më shumë foto bëhet e dukshme. Imazhi do të mbetet në qendër.

Nuk është me të vërtetë shtrirë, por sigurohet 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 ose të shtoni një lidhje rreth të gjithë përmbajtjes brenda elementit html, ose të mbështillni lidhjen rreth vetë elementit. Zgjedhja e opsionit varet nga elementi html dhe nga përmbajtja brenda atij elementi.

konkluzioni

Shpresoj se artikulli do t'ju ndihmojë të merreni me pyetjet që mund të lindin kur punoni me c Karakteristikat e sfondit CSS ose zgjidhni problemin tuaj. E rëndësishme të mbani mend, prejardhje css mos krijoni blloqe të reja. Ato mbushin vetëm blloqet ekzistuese html. Kuptimi i kësaj pike 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ë përshtypjen që dizajni juaj ka te 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.