Përshëndetje, të dashur lexues të faqes së blogut. Sot do të shikojmë pesë rregulla CSS që ju lejojnë të vendosni sfondin për çdo element në Html - pozicioni i sfondit (imazhi, përsëritja, ngjyra, bashkëngjitja). Epo, të mos harrojmë të përmendim rregullin e përbërjes së sfondit.

Nuk ka asgjë të vështirë për këtë, por ka disa hollësi dhe nuanca që duhet të dini për një shabllon të gatshëm (mbani mend, i cili do t'ju ndihmojë të hapni të gjithë historinë e çdo dizajni).

Më lejoni t'ju kujtoj edhe një herë se ky artikull është pjesë e një serie dhe do të ishte mirë që të filloni të studioni markup-in e stilit që në fillim, domethënë nga një artikull se çfarë është CSS dhe me çfarë hahet, mirë, pastaj ndiqni rendin dhënë në librin e referencës. Edhe pse, në çdo rast, varet nga ju, por tani le të flasim për vendosjen e sfondit.

Ngjyra, ngjyra e sfondit dhe imazhi i sfondit

Le të shohim fillimisht se si vendoset ngjyra e elementeve HTML duke përdorur rregullat e ngjyrave css. Në fakt, gjithçka është e thjeshtë këtu. Sintaksa është krejtësisht normale dhe ju mund ta vendosni ngjyrën në përputhje me mënyrën se si është bërë në gjuhën e shënjimit të hipertekstit. Siç e mbani mend, vendoset pas shenjës hash (hash - "#fe35a3"), ose me ndihmën e tre shifrave, nëse e para përputhet me vlerën e së dytës, e treta me të katërtën, mirë dhe të pestën, përkatësisht, me të gjashtin (kodi i ngjyrës "#aa33ff" mund të shkurtohet si "a3f").

Gjithashtu, ngjyrat në kodin Html dhe Css mund të përfaqësohen si fjalë (për shembull, "e kuqe"), por kodi heksadecimal përdoret më shpesh:

Ngjyra:#303

Si shembull, unë e kam ngjyrosur këtë paragraf të vogël me të njëjtën ngjyrë si më sipër (#303). Tani është paksa e ndryshme nga ngjyra e të gjithë paragrafëve të tjerë (më e errët), e cila është vendosur në #555 në skedarin CSS të temës së WordPress që po përdor. Por vendosja e ngjyrës përmes ngjyrës është mjaft e thjeshtë, por me sfond do të jetë pak më e komplikuar.

Kështu që, për sfond në css plotësoni pesë rregulla, të cilat, nëse dëshironi, mund të kombinohen në një ekip. Për t'i parë ato, mund të shkoni në faqen aktuale të specifikimeve të W3C dhe të kërkoni atje diçka me fjalën Sfondi:

1. ngjyra e sfondit - ky rregull përcakton ngjyrën e sfondit për çdo element HTML. Mund të përdorni ose kodin ose emrin e hijes në të, d.m.th. gjithçka është saktësisht siç ishte kur përdorni ngjyra.

imazhi i sfondit - me të, ju mund të përdorni një imazh si sfond (por sigurohuni që të lexoni për të, sepse imazhet e rënda do të ngadalësojnë ngarkimin e faqes), shtegu në të cilin do të tregohet në funksionalitetin url ().

Nëse shikoni specifikimet, do ta shihni atë ngjyra e parazgjedhur e sfonditçdo element do të jetë transparent (vlera e paracaktuar e rregullit është "background-color:transparent"). Vërtetë, në elementë nuk do të jetë transparent si parazgjedhje, sepse. këto janë elemente të sistemit dhe gjithçka është e ndryshme për ta dhe ndryshon nga etiketat e zakonshme të gjuhës së shënjimit të hipertekstit.

Ngjyra në ngjyrën e sfondit vendoset si standarde (gjashtë ose tre shifra heksadecimal, ose një fjalë):

Ngjyra e sfondit:#FEFCDE

Për shembull, sfondi i këtij paragrafi vendoset saktësisht përmes ngjyrës së sfondit me kodin e ngjyrës të dhënë pak më sipër.

Të katër rregullat e tjera të CSS do të zbatohen vetëm për imazhin e sfondit, i cili mund të vendoset për çdo element Html dhe, nëse dëshironi, të pozicionohet saktësisht. Cili skedar grafik do të përdoret mund të specifikohet duke përdorur imazhi i sfondit.

Nëse shikoni specifikimin e gjuhës së shënjimit të stilit, do të shihni se imazhi i sfondit është i paracaktuar në "asnjë" (d.m.th., nuk përdoret asnjë imazh i sfondit). Epo, nëse ende ju nevojitet, atëherë në funksionalitetin url () do t'ju duhet të specifikoni shtegun drejt tij:

Background-image:url(https://site/image/comment_top_focus.gif);

Për shembull, për këtë paragraf, kam përdorur një skedar grafik me një sfond, shtegu për të cilin është përshkruar më sipër. Ju mund të shihni se e gjithë zona e rezervuar për këtë paragraf është e mbuluar me një imazh të përsëritur, i cili në origjinal duket kështu:

Ato. kur përdorni vetëm një rregull të imazhit të sfondit që specifikon shtegun për në skedarin grafik, ky imazh do të riprodhohet si vertikalisht ashtu edhe horizontalisht derisa të mbulojë të gjithë zonën e caktuar në faqen e internetit për këtë element të veçantë Html (në shembullin tonë, ishte një paragraf). Pse po ndodh kjo?

Përsëritja e sfondit - përsërit imazhin e sfondit

Po, sepse nuk kemi shkruar asnjë vlerë për rregullin CSS sfond-përsërit, që do të thotë se vlera e paracaktuar do të përdoret për të. Duke parë specifikimin, zbulojmë se kjo vlerë korrespondon me "përsëritje" (përsëritja e imazhit në të gjitha akset). Përgjigja erdhi vetë.

Prandaj, me sfond-përsëritje ne mundemi menaxhoni përsëritjet e imazhit të sfondit. Ky rregull mund të ketë vetëm katër vlera:




Background-position - pozicioni i sfondit

Tani lind pyetja, a është e mundur të largohet imazhi i sfondit nga këndi i sipërm i majtë i zonës duke kufizuar madhësinë e elementit. Sigurisht, ju mundeni, dhe për këtë qëllim ekziston një rregull i veçantë pozicioni i sfondit:



Duke parë specifikimin CSS, bëhet e qartë pse imazhi i paracaktuar i sfondit shtypet saktësisht në skajin e sipërm majtas të zonës së elementit Html. Sepse vlera "0% 0%" është e paracaktuar për rregullin e pozicionit të sfondit.

Epo, kur ky rregull nuk është vendosur në mënyrë eksplicite për elementin (si në rastin tonë), atëherë shfletuesi zgjedh vlerën e tij, e cila pranohet në specifikimin e paracaktuar (vë në dukje se boshtet e koordinatave në CSS raportohen vetëm nga buza e sipërme e majtë të elementit të zonës).

Mund të shihet gjithashtu nga specifikimi se si vlerat relative (përqindje) ashtu edhe ato absolute (për shembull, ) mund të përdoren për të pozicionuar imazhin e sfondit duke përdorur pozicionin e sfondit. Epo, mund të përdorni edhe fjalë që do të korrespondojnë me vlera të caktuara dixhitale. Por gjërat e para së pari.

Kur vendosni pozicionin e imazhit të sfondit duke përdorur njësi absolute background-position ka parimin e mëposhtëm për përcaktimin e pozicionit të tij përfundimtar:

Ato. shfletuesi do të llogarisë zhvendosjet e specifikuara përgjatë boshteve X dhe Y nga origjina e zonës në të cilën është pozicionuar objekti deri në origjinën e vetë këtij imazhi. Për shembull, në këtë paragraf, unë pozicionova imazhin e sfondit nëpërmjet pozicionit të sfondit duke përdorur rregullat e mëposhtme të CSS:

Background-image:url(https://website/image/logo.png); sfond-përsërit: pa përsëritje; pozicioni i sfondit: 400px 25px;

Ju lutemi vini re se në këtë rast ai do të përafrohet në qendër të portit të pamjes dhe jo në qendër të zonës së rezervuar për këta paragrafë. Është e qartë se në realitet një vendosje e tillë e një imazhi të sfondit nuk ka gjasa të përdoret.

Megjithatë, nëse vendosni një pozicion fiks të sfondit për elementë të tillë si Body ose Html (d.m.th. në etiketat që mbulojnë të gjithë faqen e internetit), atëherë ky imazh do të jetë gjithmonë i dukshëm në portin e pamjes dhe pikërisht ky është përdorimi i CSS-së së bashkëngjitjes së sfondit pronë në paraqitjen moderne të bllokut.

A ka më shumë Sfondi i rregullave të parafabrikuara, e cila ju lejon të kombinoni të pesë rregullat e përshkruara më sipër në një shishe. Për më tepër, vlerat për të pesë në versionin e kombinuar mund të përdoren në çdo mënyrë dhe në çdo sasi (ato janë unike dhe shfletuesi nuk do t'i ngatërrojë ato me njëri-tjetrin). Çdo gjë që nuk e specifikoni në mënyrë eksplicite do të konsiderohet nga shfletuesi si vlera e paracaktuar.

Png) pa përsëritje 50%;

Rregulli i montimit i treguar në shembull zbatohet në këtë paragraf për qartësi. Nuk doli e bukur, por nuk është kjo gjëja. Ky paragraf përdor një ngjyrë të çuditshme të verdhë të sfondit dhe përdor një imazh të logos LiveInternet të rreshtuar në qendër të paragrafit. Sepse për rregullin e bashkëngjitjes së sfondit, nuk vendoset asnjë vlerë, më pas përdoret lëvizja (parazgjedhja).

Nëse për ndonjë element dëshironi të vendosni vetëm mbushjen me ngjyrë dhe mos u shqetësoni me imazhin e sfondit, atëherë mund ta bëni në vend të kësaj:

Ngjyra e sfondit:#FEFCDE

shkruaj:

Sfondi:#FEFCDE

Për të gjitha vlerat e tjera të rregullit të parafabrikuar do të merren si parazgjedhje, dhe kjo është ajo që ju nevojitet.

Paç fat! Shihemi së shpejti në faqen e faqeve të blogut

Mund të shikoni më shumë video duke shkuar te

");">


Ju mund të jeni të interesuar

Stili i listës (lloji, imazhi, pozicioni) - Rregullat Css për personalizimin e paraqitjes së listave në kodin Html Si të ndryshoni ngjyrën e sfondit të rreshtave të tabelave, listave dhe elementëve të tjerë Html në sajt duke përdorur pseudo-klasën e fëmijës së ntë
Pozicioni (absolut, relativ dhe fiks) - mënyra për të pozicionuar elementët Html në CSS (rregullat majtas, djathtas, lart dhe poshtë)
Fluturoni dhe pastroni në CSS - mjetet e paraqitjes së bllokut
Pozicionimi me indeksin Z dhe rregullin e kursorit CSS për të ndryshuar kursorin e miut

Me ndihmë Ngjyra dhe sfondi CSS mund të vendosni pothuajse çdo element të faqes në internet, të kontrolloni lirshëm imazhin e sfondit, përsëritjen e tij horizontalisht dhe vertikalisht. Përveç kësaj, duke përdorur CSS, mund të vendosni imazhin e sfondit kudo në ekran duke përdorur pozicionimin. Të mos vrapojmë akoma larg, të ecim me radhë.

Vetia COLOR

Kjo veti përcakton ngjyrën e elementit, më konkretisht ngjyrën e tekstit brenda elementit. Vlera jepet në një nga format e mundshme:

• emri i ngjyrës (GJELBËR, ZI, KUQ...);
• kodi heksadecimal i ngjyrave (008000, 000000, FF0000...);
• kodi dhjetor i ngjyrave në RGB (ngjyra:rgb (40, 175, 250));

Vetia COLOR trashëgohet dhe nëse një vlerë nuk vendoset për asnjë element, vlera do të trashëgohet nga paraardhësi i saj. Por mund të ndodhë që të mos jetë caktuar as për paraardhësin - atëherë fleta e stilit të shfletuesit do të aplikohet duke përdorur vlerat e paracaktuara. Ngjyra e elementit në këtë rast ka të ngjarë të jetë e zezë.

Siç e përmenda tashmë, ju mund të vendosni një ngjyrë për pothuajse të gjithë elementët, mund të jetë (H1... H6), (fortë, em) dhe madje të plota (p) dhe madje edhe kufijtë e tabelës, por më shumë për këtë më vonë.

Këtu është një shembull i vendosjes së ngjyrës së tekstit duke përdorur CSS:

h1 (ngjyra: Blu)

Në këtë shembull, të gjithë titujt e nivelit të parë të faqes në internet do të jenë blu:

e fortë (ngjyra: e kuqe)

Në këtë rast, gjithçka që është në tekstin e faqes do të theksohet me etiketën të fortë, do të bëhet e kuqe.

Mund të shkruhet kështu:

h1, p, e fortë (ngjyra: jeshile)

Më pas, titujt e nivelit të parë, të gjithë paragrafët dhe gjithçka që theksohet me një etiketë do të jenë jeshile.

Kur bëhet e nevojshme të theksohen titujt me ngjyra të ndryshme, përdoren përzgjedhësit e klasave. Një atribut përdoret për të përcaktuar një klasë në HTML klasës A që mund të aplikohet për çdo element. Në kodin HTML, do t'ju duhet të shkruani:

class="blu"> Ngjyra e titujve të kësaj klase do të jetë blu

Në fletën e stilit CSS, në këtë rast, ne shkruajmë një rregull ku elementi H1 do të jetë zgjedhësi, dhe përmes pikës ( . ) emri i klasës:

h1. Blu (ngjyra: blu)

Në dokumentet HTML përdoren edhe përzgjedhësit sipas identifikuesit, ato përcaktohen nga atributi id. Një identifikues është një atribut më domethënës ose prioritar sesa një klasë. Dhe nëse si klasa ashtu edhe identifikuesi janë të specifikuara në kodin HTML për elementin, atëherë do të aplikohet stili i identifikuesit. Identifikuesi shënohet me një shenjë paund ( # ). Për të përdorur identifikuesin në kodin HTML, do t'ju duhet të shkruani:

id="blu"> Ngjyra e titujve të këtij identifikuesi do të jetë blu

Në fletën e stilit nga ana tjetër:

h1#Blu (ngjyra: blu)

Sfondi-COLOR pronë

Kjo veçori ju lejon të vendosni ngjyrën e sfondit për faqen në tërësi, paragrafin, lidhjen, në përgjithësi për çdo element HTML. Për ta bërë këtë, ngjyra ose vlera specifikohet në vlerën e pronës. transparente(transparente). Kodi për sfondin e faqes është shkruar:

trupi (ngjyra e sfondit: aqua)

Në këtë rast, sfondi i faqes do të jetë bruz dhe për t'i dhënë sfond titullit, shkruajmë:

h1 (ngjyra e sfondit: e verdhë)

Marrim sfondin e verdhë të titujve të nivelit të parë.

Ngjyra dhe sfondi në CSS

Vetia Sfondi-Përsëriteni

Kjo veti përdoret kur vendoset për të përcaktuar nëse do të përsëritet horizontalisht dhe vertikalisht. Vlerat e vlefshme:

• përsëritni- imazhi përsëritet vertikalisht dhe horizontalisht;
• përsëris x- imazhi përsëritet vetëm horizontalisht;
• përsërit-y- imazhi përsëritet vetëm vertikalisht;
• pa përsëritje- imazhi nuk përsëritet.

Kodi është shkruar kështu:

p(
sfond-imazh: url( adresa e skedarit të imazhit) ;
sfond-përsërit : përsërit-x
}

Teksti i këtij paragrafi do të jetë në krye të imazhit të sfondit, i cili do të pozicionohet horizontalisht.

Sfondi-Bashnjës pronë

Kjo veçori përdoret për t'i treguar shfletuesit nëse imazhi i sfondit të faqes duhet të lëvizë me tekst ( rrotulloni) ose qëndroni ende ( fikse).

trupi (
sfond-imazh: url( adresa e skedarit të imazhit) ;
background-repeat : repeat-x ;
sfond-bashkëngjitje: fikse
}

Në këtë rast, imazhi i sfondit do të mbetet i fiksuar.

Sfondi-POZICIONI Prona

Kjo veti përdoret për të pozicionuar imazhin në lidhje me . Vlerat vendosen në përqindje (%), në njësi gjatësie (cm, px), me fjalë kyçe:

• Vertikalisht:
• krye- pjesa e sipërme e figurës është e lidhur me skajin e sipërm të faqes ose bllokut;
• qendër
• fund- pjesa e poshtme e imazhit është në linjë me skajin e poshtëm të faqes ose bllokut.
• Horizontalisht:
• majtas- skaji i majtë i figurës është në linjë me skajin e majtë të faqes ose bllokut;
• qendër- qendra e figurës është rreshtuar në qendër të faqes ose bllokut;
• drejtë- skaji i djathtë i figurës është në linjë me skajin e djathtë të faqes ose bllokut.

Ne shkruajmë një shembull kodi në përqindje, njësi gjatësie dhe fjalë kyçe:

trupi (
sfond-imazh: url( adresa e skedarit të imazhit) ;
pozicioni i sfondit: 0% 0%
}

Trupi (
sfond-imazh: url( adresa e skedarit të imazhit) ;
Pozicioni i sfondit: 10px 25cm
}

Trupi (
sfond-imazh: url( adresa e skedarit të imazhit) ;
sfond-pozicion: qendra e sipërme
}

Një nga detyrat më të zakonshme kur redaktoni tekstin dhe blloqet në HTML dhe CSS. Mund të përballet jo vetëm nga një kodues, por edhe nga çdo menaxher i përmbajtjes që redakton përmbajtjen e faqes. Për të zgjidhur këtë problem, përdoren vetëm dy veti: ngjyra - ngjyra e tekstit, sfondi - puna me sfondin, ngjyrën ose imazhin.

Puna me Test Color në CSS

ngjyrëështë një veti që nevojitet për të specifikuar një ngjyrë vetëm për tekstin. Ngjyra mund të specifikohet si në formatin e kodit HTML HEX ashtu edhe në formatin RGB (Blu e Kuqe e Gjelbër). Kodet e ngjyrave mund të zgjidhen ose në programe grafike si Photoshop ose në internet.

Sintaksa e vetive:

Ngjyra: Ngjyra;
Tani aplikoni pronën:

përmbajtja (
ngjyra: #444; // Teksti gri i errët në element me përmbajtje të klasës
}
Pse një shembull i tillë: të specifikosh një ngjyrë për një lidhje dhe për tekst janë dy gjëra të ndryshme. Mbani mend. Epo, vetë unë rekomandoj të bëj ngjyrën e tekstit dhe lidhjet me ngjyra të ndryshme.

Puna me prejardhje në CSS

sfondështë një veti që ju lejon të punoni me sfondin e imazhit: vendosni ngjyrën e sfondit, vendosni një imazh si sfond (formatet jpg, gif, png), ndryshoni pozicionin e sfondit dhe parametrat e tjerë që përshkruhen më poshtë.

ngjyrë e sfondit- Kjo veti përdoret vetëm për të vendosur ngjyrën e sfondit. Pranon vetëm kodin e ngjyrave. Ngjyra mund të specifikohet në formatin RGB (Red Green Blue) ose në formatin e kodit HTML HEX.

Blloko (
ngjyra e sfondit: #fbb5b5; // vendos ngjyrën e sfondit të kuq pastel
}
Shembujt më të mirë të ngjyrave për sfondin (modelet e dizajnit modern: Dizajni i sheshtë, etj.):

imazhi i sfonditështë një veti që përdoret për të vendosur disa imazhe si sfond të një elementi. Për të specifikuar një imazh, parametri url dhe shtegu i imazhit në lidhje me skedarin me stile css janë të mjaftueshëm.

#mbrapa(
background-image: url("images/fon.jpg");
}

sfond-përsërit- mund të përdoret vetëm kur veçoria e imazhit të sfondit është specifikuar më sipër. Kjo veti vendos rregullin e përsëritjes së imazhit. Si parazgjedhje, imazhi përsëritet përgjatë boshtit x dhe përgjatë boshtit y deri në kufijtë e elementit (nëse sfondi është më i vogël se elementi). Në pronë, mund të specifikoni një cilësim në mënyrë që imazhet të përsëriten vetëm përgjatë boshtit X - përsëritje-x (horizontalisht), vetëm përgjatë Y - përsëritje-y (vertikalisht) ose të mos përsëriten fare - pa përsëritje.

#përmbajtje(

sfond-përsërit: përsërit-x; /* imazhi do të përsëritet vetëm horizontalisht deri në kufijtë e bllokut */
}

sfond-bashkëngjitje- rregullon sfondin në një pozicion, domethënë, imazhi do të lëvizë së bashku me përmbajtjen e bllokut ose do të mbetet i fiksuar. Vlera e paracaktuar është lëvizja, e cila nuk rregullon pozicionin e sfondit.

#përmbajtje(
background-image: url("background.jpg");
sfond-përsërit: përsërit-x; /* imazhi do të përsëritet vetëm horizontalisht */
sfond-bashkëngjitje: fikse; /* i fiksuar në vendndodhje */
}

pozicioni i sfondit- një veti që specifikon vendndodhjen e sfondit në element. Janë dhënë dy vlera: pozicioni horizontal dhe më pas pozicioni vertikal. Specifikuar ose numerikisht (pikselë dhe përqindje) ose alfabetikisht (majtas, qendër, djathtas, lart, poshtë). Kjo veçori nevojitet kur imazhi nuk përsëritet (pa përsëritje), dhe sfondi duhet të pozicionohet në element në një mënyrë të caktuar.

#blloko(
sfond-pozicion: majtas-qendër; /* horizontal - në anën e majtë, lartësia - në mes */
}
Unë mendoj se gjithçka është e qartë në komente)
Një shembull i shkrimit të një vlere numerike:

#çelësat (
pozicioni i sfondit: 109px 57px; /* mbushja majtas 109 pikselë, sipër 57 px */
}
Edhe këtu, mendoj se gjithçka duhet të jetë e qartë.
Shumë prona? Le të shohim se si të shkruajmë shkurtuar.

Përfundimisht. stenografi CSS për sfond

Ju mund të përdorni një shënim të shkurtuar, ku të gjithë parametrat do të specifikohen në një rresht:

Sfondi: pozicioni i bashkëngjitjes së përsëritjes së imazhit me ngjyra;

Rreth pluses. Një regjistrim i tillë zvogëlon kohën e ngarkimit dhe paraqitjes së faqes nga shfletuesi. Kini keqardhje për vizitorët, është më mirë të shkruani në këtë mënyrë, përveç nëse, sigurisht, keni nevojë për disa prona.
Po, ju mund të kapërceni çdo pronë nëse nuk ka nevojë për të! Ju thjesht vazhdoni të shtoni vlera më tej në listë.

Blloko (
sfond: #f1f1f1 url("background.jpg") përsëritje-x scroll 100px 125px;
}

Një shembull se si funksionojnë sfondet në CSS

Shembull kod. Ju mund të shihni rezultatin e punës dhe kodin burimor në lidhjen më poshtë.

Në rastin e një imazhi të sfondit, është më mirë të specifikoni dimensionet e bllokut, përndryshe do të marrë madhësinë sipas përmbajtjes.

informacion të shkurtër

Versionet CSS

vlerat

url Vlera është shtegu drejt skedarit grafik, i cili specifikohet brenda konstruksionit url(). Në këtë rast, shtegu i skedarit mund të shkruhet si në thonjëza (dyshe ose teke), ashtu edhe pa to. asnjë Anulon imazhin e sfondit për elementin. inherit Trashëgon vlerën e prindit.

HTML5 CSS2.1 IE Cr Op Sa Fx

Modeli i objektit

document.getElementById("elementID").style.backgroundImage

Shfletuesit

Internet Explorer deri dhe duke përfshirë versionin 7.0 aplikon një sfond në brendësi të kufirit të një elementi që ka grupin e vetive hasLayout. Nëse elementi nuk ka një has Layout, vetia sfond-imazh do të respektojë kufijtë e elementit, siç specifikohet në specifikim. Dallimi në interpretim do të jetë i dukshëm nëse kufijtë janë të thyer (të prerë ose me pika) dhe jo të ngurta.

Nëse elementi është caktuar në lëvizje ose automatik, Internet Explorer 8 do të ketë një vonesë vertikale prej një piksel kur sfondi lëviz.

Internet Explorer deri në versionin 7.0 nuk e mbështet vlerën trashëgimore.

Nëse sfondi është caktuar për një rresht tabele (etiketa ), më pas Chrome, Safari, iOS e shfaqin atë ndryshe nga sa përcakton specifikimi, përkatësisht për secilën qelizë veç e veç. Ndërsa shfletuesi duhet të tregojë një sfond solid për të gjithë rreshtin. Shembulli 2 tregon kodin që demonstron gabimin.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Rezultati i këtij shembulli në shfletuesin Chrome është paraqitur në Fig. 1. Shfletuesi Internet Explorer, Opera dhe Firefox shfaqin saktë sfondin e linjës (Fig. 2).

Oriz. 1. Përsëriteni sfondin për secilën qelizë

Oriz. 2. Sfondi për të gjithë linjën

Unë mendoj se nuk ka asnjë vend të vetëm ku prona nuk do të përdoret sfond css. Do të duket, çfarë mund të jetë më e thjeshtë se kjo pronë? Por jo, mundësitë e tij janë shumë më të gjera se vendosja e zakonshme e një imazhi ose ngjyre si sfond i faqes. Disa do të jenë të njohura, dhe disa do të jenë të reja për shumë. Në çdo rast, do të jetë e dobishme të dini plotësisht se si funksionon sfondi.

CSS3 solli shumë gjëra të reja në pronë, të tilla si transparenca dhe vendosja e imazheve të shumta si sfond, por ne do të flasim për këtë më poshtë, por së pari do të mbulojmë bazat e pronës sfond.

ngjyrë e sfondit

Jam shumë i sigurt që e keni bërë tashmë disa herë caktimin e ngjyrës së sfondit. Kjo mund të bëhet duke përdorur disa lloje shënimesh: të rregullt (përdoret emri i ngjyrës), shënim heksadecimal ose RGB. Çdo lloj është ekuivalent, përdorni cilindo që ju pëlqen më shumë. Mundohem të përdor versionin më të shkurtër, dhe për perceptimin është më i thjeshtë dhe skedari i stilit është pak më i vogël në madhësi.

P (ngjyra e sfondit: e kuqe;) p (ngjyra e sfondit: #f00;) p (ngjyra e sfondit: #ff0000;) p (ngjyra e sfondit: rgb(255, 0, 0;))

CSS3 prezanton mbështetjen e transparencës, kështu që ne mund ta shtojmë atë në ngjyrën tonë, si kjo:

P (ngjyra e sfondit: rgba (255, 0, 0, 0.5);)

Shifra e fundit vendos transparencën në 50%. Mund të vendosni vlerën e transparencës nga 0 (sfondi plotësisht transparent) në 1 (plotësisht i errët).

imazhi i sfondit

Kjo pronë përdoret gjithashtu shumë shpesh, ju lejon të caktoni një imazh në sfond. CSS3 shton aftësinë për të caktuar imazhe të shumta në një sfond, secila duke krijuar një lloj shtrese, kështu që secila pasuese mbivendoset me atë të mëparshme. Pse mund të jetë e dobishme kjo? Gjithçka është mjaft e thjeshtë - le të themi se duhet të vidhosni gjëra të vogla në secilin nga qoshet e sitit. Në kushtet e paraqitjes pak a shumë të lëngshme, përdorimi i një imazhi nuk është një opsion. Prandaj, ne bëjmë 4 "shtresa", zhvendosim secilën imazh në këndin e vet dhe kjo është ajo, problemi është zgjidhur

Trupi (imazhi i sfondit: url("image1"), url("image2"), url("image3"))

Nëse duhet të caktoni një imazh në sfond, ne lëmë vetëm të parën në kod, mendoj se kjo është e kuptueshme.
Kur përdorni ndonjë imazh si sfond, duhet të mbani mend dy rregulla:

• vendosni një ngjyrë të kundërta të sfondit në rast se përdoruesi nuk e sheh imazhin për ndonjë arsye. Mund të çaktivizojë në mënyrë të zakonshme shfaqjen e fotografive, kursen trafikun.
• mos përdorni një imazh të sfondit për të përcjellë ndonjë informacion të rëndësishëm. Për arsyen e përmendur më lart, përdoruesi mund të mos e shohë atë.

Mbështetja për imazhe të shumta të sfondit është mjaft e gjerë. Të gjithë shfletuesit, madje edhe IE8, e mbështesin këtë pronë.