Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • në shtëpi
  • Këshilla
  • Si të krijoni një sfond për të gjithë faqen në html. Vendosja e një sfondi pa probleme në HTML

Si të krijoni një sfond për të gjithë faqen në html. Vendosja e një sfondi pa probleme në HTML

Kur krijoni ndonjë faqe interneti, përveç funksionalitetit, dizajni është shumë i rëndësishëm. Kjo është ajo që përcakton stilin dhe dizajnin e një kompanie ose personi të caktuar për të cilin po krijohet uebfaqja. Përshtatja e ngjyrës dhe imazhit të sfondit është e lehtë duke ndjekur udhëzimet në këtë artikull.

Hapni skedarin tuaj HTML duke përdorur Notepad ose ndonjë redaktues tjetër teksti me të cilin jeni mësuar. Për shembull, le të marrim një faqe interneti primitive me një minimum teksti. Ju mund të hapni skedarin tuaj duke përdorur çdo shfletues.


Së pari, ndryshoni ngjyrën e sfondit tuaj, pasi njerëzit me një lidhje të ngadaltë në internet nuk do të jenë në gjendje të shohin menjëherë imazhin e sfondit të faqes. Për një kohë, ndërsa imazhi po ngarkohet, ata do të mund të shohin vetëm ngjyrën e faqes suaj.
Futni në etiketë parametri bgcolor=”*****”, ku ***** është kodi i ngjyrës. Ju mund të zbuloni ngjyrat për HTML në çdo redaktues grafik duke zgjedhur opsionin "për ueb" ose në faqen e internetit https://colorscheme.ru/color-names


Thjesht duhet të zgjidhni një ngjyrë në paletën e rrethit dhe të caktoni intensitetin e saj brenda katrorit. Në të djathtë do të shihni dy kode për html. Kopjoni ato dhe ngjisni në bllokun e shënimeve.


Pasi të keni zgjedhur një ngjyrë dhe ta keni futur atë në kod, shikoni nëse keni bërë gjithçka siç duhet duke parë faqen e internetit që rezulton nga një shfletues.


Tani mund të filloni të futni imazhin tuaj të sfondit. Vendosni imazhin e dëshiruar në dosjen e kodit për lehtësi më të madhe. Jepini atij një emër me shkronja latine.


Tani zbuloni vendndodhjen e skedarit duke klikuar me të djathtën mbi të, duke zgjedhur "Open with" dhe duke klikuar në çdo shfletues të instaluar në kompjuterin tuaj.


Kopjoni adresën nga shiriti i kërkimit të shfletuesit tuaj.


Tani në etiketë futni rreshtin:
  • style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"


Ruani skedarin tuaj.


Kontrolloni faqen tuaj të internetit. Do të shihni se sfondi është zëvendësuar për tekstin tuaj.


Ju lutemi vini re se për përdoruesit me rezolucion më të lartë të ekranit, imazhi juaj do të kopjohet poshtë dhe djathtas. Nuk do të duket mirë nëse fotografia nuk është monokromatike. Ekzistojnë komanda të veçanta për të korrigjuar këtë parametër.

  • sfond-përsërit: "Vlera". Opsionet për vlerën tuaj mund të jenë: "repeat-x" - përsërit imazhin tuaj të sfondit si horizontalisht ashtu edhe vertikalisht. "përsërit-y" - përsëritje vetëm vertikalisht. "pa përsëritje" - imazhi është i ngrirë në vend dhe nuk përsëritet. "hapësirë" - e gjithë faqja do të mbushet me numrin maksimal të kopjeve të figurës, ato më të jashtmet do të priten. "Rrumbullakët" - i njëjti opsion, por skajet e figurës do të shkallëzohen me kujdes;
  • sfond-bashkëngjitje: "Vlera". Nëse zëvendësoni etiketën "lëvizje" në vend të fjalës Vlera, imazhi do të lëvizë së bashku me sajtin. "i rregulluar" - sfondi mbetet i pandryshuar kur lëvizni;
  • sfond-size: Vlera Vlera2. Këtu vlerat duhet të marrin një vlerë në pixel. Për shembull: 100px 200px. Përveç pikselëve, pranohen edhe vlerat e përqindjes. Ky është një opsion për të mbushur faqen me një imazh. Përveç numrave, mund të futni dy parametra: "përmbajë" - mbush faqen me një imazh përgjatë anës së gjatë dhe "mbulesë" - mbush faqen me një imazh përgjatë gjerësisë.

Pasi të dini bazat e mbushjes së një faqeje me sfond në HTML, jeni gati të krijoni uebsajtin tuaj të parë.

Vlad Merzheviç

Për shkak të veçorive të faqeve në internet, imazhet e sfondit luajnë një rol të rëndësishëm në paraqitjen e dokumenteve të faqes. Në të njëjtën kohë, ata janë të përfshirë në mënyrë aktive në një sërë gjërash, për shembull, automatizimi i procesit të bashkëngjitjes së fotografive në tekst, krijimi i tranzicioneve gradient dhe, natyrisht, shtimi i një sfondi nën përmbajtje. Më poshtë janë disa aspekte të përdorimit të imazheve të sfondit.

Sfondi në një faqe interneti

Vendosja e një imazhi të sfondit në një faqe ueb tradicionalisht ndodh përmes atributit të sfondit të etiketës. . Ky model përsëritet horizontalisht dhe vertikalisht, duke mbushur kështu të gjithë dritaren e shfletuesit. Është e qartë se këtu nuk ka opsione të veçanta për krijimtarinë, kështu që le të kthehemi te stilet dhe të shohim se çfarë mund të bëhet duke përdorur CSS.

CSS ka pesë atribute që kontrollojnë imazhin e sfondit: shtimi, pozicioni dhe përsëritja e tij. Megjithatë, të gjithë këta parametra zëvendësohen nga një veti universale, sfondi, të cilin do ta përdorim në të ardhmen.

Shtimi i një sfondi

Shtimi i një fotografie ndodh duke vendosur adresën e figurës duke përdorur fjalën kyçe url. Për të kontrolluar përsëritjen e një imazhi, përdoren argumentet no-repeat, repeat-x (përsëriteni horizontalisht) dhe repeat-y (përsëriteni vertikalisht). Falë kësaj, ju mund të merrni faqen e internetit të paraqitur në Fig. 1.

Për të vendosur një imazh në një faqe interneti, duhet të shtoni një veçori të stilit të sfondit në përzgjedhësin BODY, siç tregohet në Shembullin 1.

Shembulli 1: Imazhi i sfondit

Imazhi i sfondit

Në këtë shembull, target.gif grafik përcaktohet si sfondi i faqes së internetit pa përsëritur imazhin. Për të parandaluar që imazhi të përshtatet fort në skajet e shfletuesit, ai zhvendoset 30 pikselë djathtas dhe 20 pikselë poshtë nga pozicioni i tij origjinal.

Përsëritja e një modeli

Për shkak të faktit se mund të vendosni modelin e sfondit të përsëritet horizontalisht ose vertikalisht, disa opsione janë të disponueshme për hartimin e faqeve në internet. Për shembull, për të krijuar një shirit vertikal përgjatë skajit të majtë (Fig. 2), do t'ju duhet imazhi i paraqitur në Fig. 3.

Dizajni duhet të jetë i tillë që të përshtatet vertikalisht pa shtresa të dukshme, dhe gjithashtu të formojë një tërësi të vetme me ngjyrën e specifikuar të sfondit të faqes së internetit. Shembulli 2 tregon se si të krijohet një imazh i tillë i sfondit, duke përdorur përsëri veçorinë e sfondit dhe vlerën e tij të përsëritjes-y.

Shembulli 2. Përsëritja e sfondit vertikalisht

Imazhi i sfondit

Në mënyrë të ngjashme, ju mund të përsërisni sfondin horizontalisht, për shembull, duke krijuar një gradient dhe duke e vendosur atë si një imazh të sfondit (Fig. 4).

Për të marrë faqen e internetit të paraqitur në Fig. 4, së pari do t'ju duhet të bëni një fotografi me një tranzicion gradient. Gjerësia është e mjaftueshme për të specifikuar 20-40 piksele, dhe lartësia e imazhit varet nga qëllimi i dokumentit dhe lartësia e pritur e përmbajtjes së faqes në internet. Mos harroni gjithashtu se një vizatim i madh do të rrisë madhësinë e skedarit grafik. Dhe kjo do të ndikojë negativisht në shpejtësinë e ngarkimit të tij dhe, në fund të fundit, do të çojë në shfaqje më të ngadaltë të sfondit. Për këtë rast, një fotografi prej 30x200 piksele ishte mjaft e përshtatshme (Fig. 5).

Shembulli 3 tregon kodin HTML për të krijuar një sfond gradient.

Shembulli 3: Përsëritja e sfondit horizontalisht

Imazhi i sfondit

Lorem ipsum...

Një dizajn gradient shkon mirë me një bllok me ngjyra të forta, kështu që në këtë shembull ne shtojmë një shtresë për të shfaqur përmbajtjen e faqes së internetit.

Shtimi i një fotografie në tekst

Duke përdorur një imazh të sfondit, ju mund të automatizoni procesin e shtimit të grafikëve në tekst të caktuar, siç janë titujt. Për ta bërë këtë, përdorni veçorinë universale të sfondit, e cila zbatohet në përzgjedhësin e dëshiruar. Vlera është rruga drejt figurës dhe, në mënyrë që ajo të mos përsëritet, argumenti pa përsëritje (shembulli 4).

Shembulli 4: Shtimi i një fotografie

Imazhi i sfondit

Drejtimi

Teksti kryesor

Siç tregohet në këtë shembull, vizatimi mund të zhvendoset horizontalisht dhe vertikalisht nga pozicioni i tij origjinal, si parazgjedhje ky është këndi i sipërm i majtë i elementit të bllokut. Zhvendosja e sfondit ju lejon të poziciononi imazhin në lidhje me tekstin në mënyrën e dëshiruar. Për të parandaluar që teksti të mbivendoset mbi imazhin, duhet të shtoni veçorinë padding-left, për shkak të së cilës teksti zhvendoset në të djathtë me distancën e specifikuar. Ai është individual në secilin rast dhe zakonisht është i barabartë me gjerësinë e figurës plus hapësirën e dëshiruar midis imazhit dhe tekstit.

Vendosja e ngjyrës së sfondit dhe/ose imazhit për një faqe ose elementin e saj individual është mjaft i thjeshtë. Gjëja kryesore është të dini se ku dhe si ta bëni këtë, si dhe të keni një kod ngjyrash dhe/ose imazh të sfondit. Është e mundur që ju të mësoni shumë gjëra të reja nga ky artikull, por unë e krijova atë posaçërisht për fillestarët. Prandaj, gjithçka do të jetë sa më e shkurtër dhe e detajuar në të njëjtën kohë. Gjëja kryesore është që ju do të merrni jo vetëm një ide të përgjithshme dhe shembuj të gatshëm, por edhe një kuptim se si të krijoni një sfond në HTML.

Për të vendosur sfondin në HTML përdorni DOCTYPE të ndërmjetme

Dhe do të filloj me faktin se në HTML5 nuk është e mundur të vendoset. U vendos që kjo veçori të shtohej në CSS. Prandaj, nëse planifikoni të përdorni sa vijon dhe dëshironi të merrni kodin e vlefshëm (të saktë), duhet të zgjidhni llojin e dokumentit kalimtar. Për ta bërë këtë, faqja juaj e internetit duhet të fillojë me rreshtin e mëposhtëm:

Kalimtare//EN" "http://www.w3.org/TR/html4/loose.dtd">

Me këtë jashtë rrugës, le të kalojmë në të kuptuarit se si krijohet sfondi. Dhe gjëja e parë që duhet vënë re këtu është ndryshimi midis ngjyrë e sfondit Dhe foto sfondi. Në fillim shkon ngjyrë e sfondit, e cila mbush të gjithë hapësirën e disponueshme të faqes ose elementit të saj. Mbivendosur mbi të është një përsëritje foto sfondi. Vizualisht kjo mund të përshkruhet si më poshtë:

Sfondi i një dokumenti HTML dhe elementet e tij

Gjëja e dytë që duhet të dini është ndryshimi midis trupi i dokumentit Dhe element dokumenti. Trupi i dokumentit tregohet në kodin HTML të një faqe interneti nga etiketa BODY, e cila përfshin të gjithë përmbajtjen e faqes së internetit. Natyrisht, sfondi i trupit të dokumentit nuk mund të jetë transparent. Nëse sfondi i trupit të dokumentit nuk është specifikuar, përdoret vlera e paracaktuar e specifikuar në cilësimet e shfletuesit.

Elementet e faqes janë brenda etiketës BODY. Vlen të përmendet se nuk është e mundur të vendosni ngjyrën dhe/ose imazhin e sfondit duke përdorur HTML për të gjithë elementët e dokumentit. Për shembull, një imazh i sfondit mund të specifikohet vetëm për tabela. Si parazgjedhje, ato zakonisht kanë një sfond transparent.

Atributi bgcolor për të krijuar një ngjyrë të sfondit

Te pyesesh ngjyrë e sfondit dokumenti ose elementët e tij përdorin atributin bgcolor, për shembull:



Në këtë rast, ne po vendosim ngjyrën e sfondit për faqen në tërësi. Dhe këtu është një shembull se si të vendosni ngjyrën e sfondit për një tabelë në etiketën TABLE:





Tekst me sfond

Vlen të përmendet se ngjyra e sfondit në tabelë mund të specifikohet për të dy rreshtat në etiketën TR dhe për qelizat e tyre në etiketën TD.

Si të zbuloni kodin e ngjyrave?

Ju ndoshta e keni vënë re tashmë se ngjyra në HTML është vendosur në një të veçantë kodi, për shembull: #ec008c . Për të gjetur kodin e ngjyrës që ju nevojitet, mund të përdorni një nga redaktuesit grafik. Për shembull, në Photoshop mund të përdorni " Mjet për pikakë sysh» (Pietë) për të marrë ngjyrë nga një pikë në figurë. Më pas, duhet të klikoni ngjyrën që rezulton në shiritin e veglave dhe në dritaren që hapet " Zgjedhësi i ngjyrave» (Zgjedhja e ngjyrave) kopjoni kodin e ngjyrës.

Ju lutemi vini re se ky kod nuk do të ketë një shenjë paund (#) në fillim; kjo shenjë do të duhet të shtohet manualisht.

Ju gjithashtu mund të përdorni shërbime të shumta në internet, për shembull:

  • etj.

Parimi i tyre i funksionimit është edhe më i thjeshtë - klikoni ngjyrën e dëshiruar dhe merrni kodin e saj.

Atributi i sfondit për të krijuar një imazh të sfondit

Njëlloj si në rastin e ngjyrës së sfondit, dhe në rastin e foto sfondi Ju duhet të përdorni një atribut të veçantë, përkatësisht sfond, për shembull:



Në këtë rast, ne po vendosim një imazh të sfondit për faqen në tërësi. Vlen të përmendet se për shkak të kufizimit të madhësisë së imazhit, ajo do të përsëritet, për shembull:

Siç mund ta shihni, kur përsëritet, kalimi midis fotove është i dukshëm. Prandaj, shpesh përdoren fotografi të veçanta ku merret parasysh kjo pikë.

Dhe këtu është një shembull se si të vendosni një imazh të sfondit për një tabelë në etiketën TABLE:





Tekst me sfond

Vlen të përmendet se imazhi i sfondit mund të vendoset vetëm për tabelën në tërësi dhe/ose qelizën e saj individuale. Kjo nuk do të funksionojë për një varg.

Rruga absolute dhe relative drejt imazhit të sfondit

Vlen të kushtohet vëmendje e veçantë adresa e imazhit të sfondit. Në këtë rast, përdoret një rrugë relative për imazhin, d.m.th. Adresa specifikohet në lidhje me vendndodhjen e skedarit të imazhit për skedarin e faqes së internetit. Ky opsion nuk mund të quhet veçanërisht i suksesshëm. Është më mirë të përdorni një rrugë absolute drejt imazhit, d.m.th. URL-ja e tij e plotë, Për shembull:



Në këtë rast, nuk do të keni asnjë problem të lidhur. Ju mund të lexoni më shumë për këtë.

Le ta përmbledhim

Përdorimi i atributeve bgcolor dhe sfondit është i vjetëruar, kështu që për vlefshmërinë e kodit HTML do t'ju duhet të përdorni DOCTYPE kalimtare. Për të vendosur ngjyrën e sfondit në HTML, ai përdor kode speciale, të cilat mund t'i gjeni në një redaktues grafik ose duke përdorur shërbime speciale në internet. Imazhi i sfondit kopjohet brenda zonës së caktuar për të dhe shtrihet në krye të ngjyrës së sfondit. Për të specifikuar një imazh të sfondit, është më mirë të përdorni URL-në e tij të plotë. Kaq kam. Faleminderit per vemendjen. Paç fat!

në orën 22:37 Redakto mesazhin

Ditë të mbarë për të gjithë ata që duan të mësojnë dhe të mësojnë diçka të re! A i keni kushtuar ndonjëherë vëmendje pamjes, gjatë zhvillimit të së cilës krijuesit ishin shumë dembelë për të hartuar sfondin e faqeve? Dhe e bëra. Duket keq. Shpesh, për shkak të mungesës së ndarjeve të zakonshme midis llojeve të ndryshme të informacionit, ai ngatërrohet dhe thjesht nuk ka dëshirë për të parë asgjë më tej në një burim të tillë në internet.

Për të parandaluar që një fatkeqësi e tillë të më ndodhte, vendosa të shkruaj një artikull me temën: "Si të krijojmë një sfond faqeje në html". Pas leximit të botimit, do të mësoni se çfarë mjetesh mund të përdorni për të vendosur dizajnin e sfondit, si ta rregulloni ose ndryshoni sfondin dhe shumë më tepër që do t'ju ndihmojnë ta bëni faqen tuaj tërheqëse. Tani le të fillojmë!

Mjetet bazë për vendosjen e sfondit të faqeve të internetit

Për të vendosur një imazh të sfondit, zhvilluesit e gjuhës së uebit dhanë atributin e sfondit. Është në dispozicion si në , ashtu edhe në css.

Në gjuhën e shënjimit, ky është një atribut i etiketës së trupit, dhe në fletët e stileve, është një veti universale që ju lejon të vendosni deri në 5 karakteristika të sfondit në të njëjtën kohë. Sfondi është një element mjaft fleksibël që mund të përdoret për të vendosur sfondin në formën e një ngjyre të vetme, një fotografie me ngjyra apo edhe një animacion.

Pra, për të vendosur imazhin e sfondit përmes njësisë html thjesht shkruani kodin e mëposhtëm: ... dhe në vend të fjalëve "adresa e skedarit" futni shtegun për në foto.

Megjithatë, ju lutem vini re! Nëse dëshironi të shihni një kanavacë me një ngjyrë si sfond, të specifikuar nga një vlerë nga paleta e ngjyrave, atëherë kjo bëhet duke përdorur atributin bgcolor.

Për shembull, ..., ne kemi vendosur një sfond të zi për faqen tonë.

Ngjyrat në css dhe html përcaktohen ose nga një fjalë angleze (për shembull, e kuqe) ose një kod i veçantë, i cili përbëhet nga shenja # dhe gjashtë karaktere pas saj (për shembull, #FFDAB9).

Kur shkruani opsionin e dytë në softuer të specializuar për zhvillues, paleta do të shfaqet automatikisht para jush. Nëse sapo keni filluar të mësoni këto gjuhë të internetit, atëherë mund të kërkoni kodin e ngjyrave në internet.

Sfondi si një veti në fletët e stilit kaskadë

Vendoset ose në një skedar të veçantë me stile css, ose në një element

Teksti i parë

Teksti i dytë

sfond-bashkëngjitje

Teksti i parë

Teksti i dytë

Në këtë shënim mund të përmbledhim punën tonë. Bashkohuni me radhët e pajtimtarëve të mi besnikë, bëni pyetje nëse diçka është e paqartë dhe mos u bëni lakmitar me një lidhje në blogun tim, por ndajeni atë me miqtë tuaj. Ju uroj një përvojë të këndshme mësimore. Mirupafshim!

Përshëndetje, Roman Chueshov

Në html, sfondi për sitin nuk është specifikuar; kjo është shkruar duke përdorur stilet CSS, por ky është vetëm një formalitet teorik. Tani le të zbulojmë se si ta përcaktojmë këtë sfond.

Sfondi për një faqe interneti ose një bllok të veçantë

Meqenëse na duhet një skedar css për të arritur këtë qëllim, duhet ta krijojmë dhe ta lidhim me html. Kjo është shkruar për në. Pas kësaj mund të filloni të punoni. Së pari, duhet të vendosni se ku dëshironi të vendosni sfondin. Nëse e gjithë faqja në tërësi, atëherë mund ta bëni si kjo:

Trupi (ngjyra e sfondit: e bardhë;)

Kjo do të thotë, ne hyjmë në etiketën e trupit, i cili përfaqëson të gjithë faqen tonë. Për të vendosur ngjyrën e sfondit, përdorni veçorinë e ngjyrës së sfondit. Por, çka nëse ju duhet ta vendosni sfondin në një model dhe jo në një ngjyrë të fortë? Atëherë duhet ta shkruani kështu:

Trupi (imazhi i sfondit: url (rruga drejt figurës. zgjerimi i figurës) )

Për qartësi, unë propozoj të shikojmë gjithçka në më shumë detaje duke përdorur një shembull. Për këtë unë do të përdor këtë imazh:

Për shembull, background-image: url(comp.png) . Në këtë shembull, ne vendosëm një imazh të sfondit të quajtur comp (kështu e quajta unë) në formatin png, i cili ndodhet në të njëjtën dosje si skedari css.
Në html do të krijoj një bllok të personalizuar me dimensione specifike për të demonstruar funksionimin e vetive CSS.

Dhe këtu janë stilet për të:

#ct(imazhi i sfondit: url(comp.png); gjerësia: 600 px; lartësia: 400 px; )

Ja çfarë kemi:

Pse eshte ajo? Fakti është se si parazgjedhje shfletuesi përsërit imazhin kaq shumë herë për të mbushur plotësisht bllokun. Ndonjëherë kjo është e nevojshme, për shembull, kur përdorni modele pa probleme, por në rastin tonë duhet të ketë një fotografi. Për fat të mirë, kjo mund të menaxhohet shumë lehtë.

Përsëriteni sfondin

Nëse keni një imazh si sfond, atëherë si parazgjedhje ai do të përsëritet horizontalisht dhe vertikalisht për të mbushur të gjithë hapësirën e faqes. Për ta hequr këtë, përdorni veçorinë e përsëritjes së sfondit dhe vlerën e saj të mos përsëritjes. Ekzistojnë gjithashtu vlerat e mëposhtme:

  • Përsëriteni-x - përsërisni vetëm horizontalisht
  • Përsërit-y – vetëm vertikale

Le t'i shtojmë vetive të sfondit tonë grafik:

Sfondi-përsërit: pa përsëritje;

Pozicioni

Vetia background-position përcakton vendndodhjen ku do të vendoset imazhi. Dy vlera janë specifikuar këtu - horizontalisht dhe vertikalisht. Shembuj: pozicioni i sfondit: djathtas poshtë - pozicioni në këndin e poshtëm djathtas, lart-majtas - në këndin e sipërm të poshtëm (dhe kështu sipas parazgjedhjes), 250 pikselë 500 px - zhvendosur nga këndi i sipërm i majtë në të djathtë me 250 piksele dhe poshtë me 500.

Le t'i hedhim një vështrim më të mirë shembujve:

Sfondi-pozicioni: lart djathtas;

Fotografia do të zhvendoset në skajin e sipërm të djathtë. I dhashë bllokut gjithashtu një sfond të verdhë në mënyrë që të shiheshin skajet e tij.

sfond-pozicion: 50% 50%;

Imazhi u shfaq saktësisht i përqendruar në bllokun e tij. Po, po, kjo është e mundur edhe falë regjistrimit në përqindje të pozicionit.

sfond-pozicion: 70% 20%;

Sfondi zhvendoset me 70% horizontalisht dhe 20% vertikalisht.

Lejohet gjithashtu të specifikoni një vlerë pozicioni negativ në pixel. Kjo mund të bëhet, për shembull, kur përdorni një imazh të madh sprite dhe ju duhet të vendosni pjesën e kërkuar të këtij sprite në një bllok.

Blloko sfondin

Gjithashtu më pëlqen shumë një pronë e quajtur sfond-bashkëngjitje. Ka vetëm dy vlera dhe e para është e paracaktuar (lëvizni). Kjo do të thotë që ndërsa lëvizni faqen, sfondi gjithashtu do të lëvizë dhe nëse përdorni një imazh pa përsëritje, ai përfundimisht do të mbarojë dhe do të jetë thjesht një ngjyrë e fortë.

Për të parandaluar që kjo të ndodhë, është specifikuar bashkëngjitja e sfondit: fiks dhe tani sfondi ynë është fiksuar në mënyrë të sigurt në vend. Kjo mund të krahasohet me mënyrën se si të përcaktohet një pozicion fiks për një bllok në mënyrë që të mos zhduket nga faqja kur lëviz.

Një version i shkurtuar i gjithë kësaj mirësie

Ne kemi diskutuar shumë veti që ju lejojnë të krijoni një sfond, por nëse i aplikoni të gjitha, përfundoni me një regjistrim të rëndë. Ekziston një zgjidhje shumë elegante. Vetia e sfondit ju lejon të shkruani cilësimet e nevojshme të ndara nga një hapësirë ​​në këtë renditje:
Sfondi: pozicioni i kunjit të përsëritur të imazhit me ngjyra;
Dhe tani gjithçka mund të shkruhet kështu:

Sfondi: url e verdhë (comp.png) pa përsëritje 20% 100 pikselë;

Nëse disa pronë nuk kanë nevojë të përcaktohen, atëherë ajo thjesht hiqet (në rastin tonë, ne nuk kemi shkruar sfond-bashkëngjitje).

Shumë prejardhje

Po sikur të keni nevojë për disa imazhe të sfondit? Ndodh, çfarë mund të bësh? Sot CSS e mbështet këtë veçori. Le ta provojmë edhe atë. Le të marrim këtë ikonë

E quajta laptop.

Dhe këtu është kodi për të futur multifonin:

Sfondi: url(comp.png) pa përsëritje 20% 100 px, url(laptop.png) pa përsëritje 50% 50%; ngjyra e sfondit: e verdhë;

Siç mund ta shihni, thjesht duhet të vendosni një presje pas imazhit të parë dhe të futni cilësimet për të dytën. Në këtë rast, është më mirë të vendosni veçmas një ngjyrë të fortë.

Në të njëjtën mënyrë, mund të regjistroni sa më shumë fotografi që dëshironi, por mos e teproni - shumë grafika nuk janë shumë të mira.

Këtu do të doja ta mbyllja këtë artikull. Ju mund të bëni shumë gjëra të tjera interesante me sfond, unë do të përpiqem të shkruaj për to në të ardhmen (dhe unë kam shkruar tashmë diçka - për shembull,).

Artikujt më të mirë mbi këtë temë