Sfondi në CSS (ngjyra, pozicioni, imazhi, përsëritja, shtojca) - të gjitha për vendosjen e ngjyrës së sfondit ose imazhit të sfondit të elementeve Html. Sfondi i CSS. Udhëzuesi i plotë për përsëritjen e një imazhi css
Nga autori: I mirëpres të gjithë. Ngjyrat dhe imazhet e sfondit luajnë një rol të madh në krijimin e faqeve në internet, pasi ato lejojnë që çdo element të projektohet në mënyrë më tërheqëse. Sot do të shikojmë se si të krijojmë një sfond në html.
A është e mundur të kaloni me html kur vendosni sfondin?
Unë do t'ju them menjëherë se jo. Në përgjithësi html nuk është krijuar për të stiluar faqet e internetit. Justshtë thjesht shumë e pakëndshme. Për shembull, ekziston një atribut bgcolor me të cilin mund të vendosni ngjyrën e sfondit, por kjo është shumë e papërshtatshme.
Prandaj, ne do të përdorim fletët e stilit kaskadë (CSS). Ka shumë më tepër mundësi për përcaktimin e sfondit. Ne do të analizojmë ato më themeloret sot.
Si mund ta vendos sfondin përmes css?
Pra, para së gjithash, duhet të vendosni se cili element duhet të vendosni sfondin. Kjo është, ne duhet të gjejmë përzgjedhësin në të cilin do të shkruajmë rregullin. Për shembull, nëse sfondi duhet të vendoset për të gjithë faqen si një e tërë, atëherë mund ta bëni këtë përmes zgjedhësit të trupit, për të gjitha blloqet - përmes zgjedhësit të div. Pra, etj Sfondi mund dhe duhet të jetë i lidhur me çdo përzgjedhës tjetër: klasat e stilit, identifikuesit, etj.
Pasi të keni vendosur për përzgjedhësin, duhet të shkruani vetë emrin e pronës. Për të vendosur ngjyrën e sfondit (vetëm një ngjyrë solide, jo një gradient ose një imazh), përdorni vetinë e ngjyrës së sfondit. Pas tij duhet të vendosni një zorrë të trashë dhe të shkruani vetë ngjyrën. Kjo mund të bëhet në mënyra të ndryshme. Për shembull, duke përdorur fjalë kyçe, formate të kodit hex, rgb, rgba, hsl. Çdo metodë do të bëjë.
Metoda më e përdorur zakonisht është kodi heksadecimal. Për përputhjen e ngjyrave, mund të përdorni një program që tregon kodin e ngjyrave. Për shembull photoshop, bojë ose ndonjë mjet në internet. Prandaj, për shembull, unë do të shkruaj një sfond të përgjithshëm për të gjithë faqen në internet.
trupi (ngjyra e sfondit: # D4E6B3;)
Ky kod duhet të futet në pjesën e kokës. Shtë e rëndësishme që skedarët të jenë në të njëjtën dosje.
Foto si sfond
Unë do të përdor një ikonë të vogël të gjuhës HTML si një fotografi:
Le të krijojmë një bllok bosh me një identifikues:
< div id = "bg" > < / div > |
Le t'i japim asaj dimensione dhe sfond të qartë:
#bg (gjerësia: 400px; lartësia: 250px; sfond-imazh: url (html.png);)
#bg ( gjerësia: 400px; lartësia: 250px; sfond - imazh: url (html. png); |
Nga ky kod, ju mund të shihni se unë kam përdorur një pronë të re - background-image. Isshtë krijuar vetëm për të futur një fotografi si sfond për një element html. Le të shohim se çfarë ka ndodhur:
Për të vendosur një fotografi, duhet të shkruani fjalën kyçe url pas zorrës së trashë dhe pastaj të specifikoni rrugën e skedarit në kllapa. Në këtë rast, rruga përcaktohet bazuar në faktin se imazhi është në të njëjtën dosje si dokumenti html. Ju gjithashtu duhet të specifikoni formatin e imazhit.
Nëse e keni bërë këtë, dhe sfondi ende nuk shfaqet në bllok, kontrolloni përsëri nëse keni shkruar emrin e figurës në mënyrë korrekte, nëse rruga dhe shtrirja janë specifikuar saktë. Këto janë arsyet më të zakonshme pse sfondi thjesht nuk shfaqet sepse shfletuesi nuk mund ta gjejë imazhin.
Por a e keni vërejtur një veçori? Shfletuesi mori dhe riprodhoi imazhin në të gjithë bllokun. Pra, që ta dini, kjo është sjellja e paracaktuar e imazheve në sfond - ato përsëriten vertikalisht dhe horizontalisht derisa të mund të futen në bllok. Ju lehtë mund ta kontrolloni këtë sjellje. Për ta bërë këtë, përdorni vetinë e përsëritjes së sfondit, e cila ka 4 vlera kryesore:
Përsërit - vlera e paracaktuar, imazhi përsëritet në të dy anët;
Përsërit-x - përsërit vetëm për ois x;
Përsërit-y - përsërit vetëm përgjatë boshtit y;
Jo-përsëritje - nuk përsëritet fare;
Ju mund të shkruani secilën vlerë dhe të shihni se çfarë ndodh. Do ta shkruaj kështu:
sfond-përsëritje: përsërit-x;
sfond - përsëris: përsëris - x; |
Tani përsëritni vetëm horizontalisht. Pa përsëritje, do të kishte vetëm një fotografi.
E shkëlqyeshme, ju mund ta përfundoni këtë tashmë, pasi që këto janë mundësitë themelore për të punuar me sfondin, por unë do t'ju tregoj edhe 2 prona të tjera që ju lejojnë të merrni më shumë kontroll mbi të.
Me përsëritje, dizajnerët e paraqitjeve përdornin cilësi dhe gradiente të sfondit duke përdorur një imazh të vogël. Mund të jetë 30 pixel me 10 pixel ose më pak. Mbase edhe pak. Imazhi ishte i tillë që kur përsëritej në njërën apo edhe në të dy anët, asnjë tranzicion nuk ishte i dukshëm, kështu që në fund të merrej një sfond i vetëm i fortë. Nga rruga, kjo qasje vlen të përdoret tani nëse doni të përdorni një strukturë të përsosur në faqen tuaj të internetit si sfond. Sot, gradienti tashmë mund të zbatohet duke përdorur metodat css3, patjetër që do të flasim për këtë.
Pozicioni i sfondit
Si parazgjedhje, imazhi i sfondit, nëse nuk është vendosur të përsëritet, do të jetë në këndin e sipërm të majtë të bllokut të tij. Por pozicioni mund të ndryshohet lehtësisht duke përdorur vetinë e pozicionit të sfondit.
Ju mund ta pyesni atë në mënyra të ndryshme. Një nga opsionet është thjesht të tregoni anët në të cilat duhet të vendoset fotografia:
pozicioni i sfondit: maja e djathtë;
sfondi - pozicioni: maja e djathtë; |
Kjo është, vertikalisht, gjithçka mbeti e njëjtë: imazhi i sfondit është i vendosur në krye, por horizontalisht, ne ndryshuam anën në të djathtë, domethënë në të djathtë. Një mënyrë tjetër për të vendosur pozicionin është si përqindje. Në këtë rast, numërimi mbrapa fillon në çdo rast nga këndi i sipërm i majtë. 100% - i gjithë blloku. Kështu, për ta vendosur figurën pikërisht në qendër, shkruaj këtë:
pozicioni i sfondit: 50% 50%;
sfondi - pozicioni: 50% 50%; |
Mos harroni një gjë të rëndësishme në lidhje me pozicionimin - parametri i parë është gjithmonë pozicioni horizontal, dhe i dyti është pozicioni vertikal. Pra, nëse shihni një vlerë prej 80% 20%, atëherë menjëherë mund të konkludoni se imazhi i sfondit do të zhvendoset fort në të djathtë, por nuk do të ulet shumë.
Më në fund, mund të shkruani pozicionin në pixel. Gjithçka është e njëjtë, por në vend të% do të ketë px. Në disa raste, ky pozicionim mund të jetë gjithashtu i nevojshëm.
Shënim i shkurtuar
Pajtohem që kodi rezulton të jetë mjaft i rëndë nëse gjithçka vendoset ashtu siç e kemi bërë. Rezulton se rruga për në fotografi duhet të vendoset, dhe përsëritja, dhe pozicioni. Natyrisht, përsëritja dhe pozicioni nuk janë gjithmonë të nevojshme, por në çdo rast, është më e saktë të përdorësh pronën e stenografisë. Duket kështu:
sfondi: # 333 url (bg.jpg) pa përsëritje 50% 50%;
sfond: # 333 url (bg.jpg) pa përsëritje 50% 50%; |
Kjo është, hapi i parë është të regjistroni ngjyrën e përgjithshme të ngurtë të sfondit, nëse është e nevojshme. Pastaj rruga për tek imazhi, përsëritja dhe pozicioni. Nëse ndonjë parametër nuk është i nevojshëm, atëherë ne thjesht e heqim atë. Pajtohem, kjo është shumë më e shpejtë dhe më e përshtatshme, dhe ne gjithashtu ulim ndjeshëm kodin tonë. Në përgjithësi, ju këshilloj që gjithmonë të shkruani me shkurtesa, edhe nëse duhet të tregoni vetëm një ngjyrë ose një fotografi.
Kontrollimi i madhësisë së imazhit të sfondit
Imazhi ynë aktual nuk është i përshtatshëm për hilen tjetër, kështu që unë do të marr një tjetër. Në madhësi, le të jetë si një bllok ose më i madh se ai. Pra, imagjinoni se jeni ballafaquar me një detyrë: të bëni një imazh sfondi në mënyrë që të mos e mbushë plotësisht bllokun e tij. Dhe fotografia, për shembull, është edhe më e madhe se madhësia e bllokut.
Çfarë mund të bësh në këtë rast? Sigurisht, opsioni më i thjeshtë dhe më i arsyeshëm do të ishte thjesht zvogëlimi i figurës, por nuk është gjithmonë e mundur të bëhet kjo. Le të themi se është në server dhe për momentin nuk ka kohë ose mundësi për ta zvogëluar atë. Problemi mund të zgjidhet duke përdorur pronën me madhësi sfondi, e cila mund të quhet relativisht e re dhe që ju lejon të manipuloni madhësinë e imazhit të sfondit, ose në të vërtetë ndonjë sfond.
Pra, fotografia ime tani zë të gjithë hapësirën në bllok, por unë do t'i jap një madhësi sfondi:
madhësia e sfondit: 80% 50%;
sfondi - madhësia: 80% 50%; |
Përsëri, parametri i parë është madhësia horizontale, e dyta - madhësia vertikale. Ne mund të shohim se gjithçka ishte aplikuar si duhet - fotografia u bë 80% e gjerësisë së bllokut në gjerësi dhe gjysmë në lartësi. Këtu ju thjesht duhet të bëni një sqarim - duke vendosur madhësinë në përqindje, ju mund të ndikoni në proporcionet e fotos. Kështu që bëni kujdes të mos dilni nga proporcioni.
Siç mund ta merrni me mend, madhësia e sfondit mund të specifikohet edhe në piksel. Ekzistojnë gjithashtu dy fjalë kyçe që mund të përdoren gjithashtu:
Cover - fotografia do të shkallëzohet në mënyrë që të paktën njëra anë e saj të mbushë plotësisht bllokun.
Përmbajeni - e shkallëzon atë në mënyrë që fotografia të përshtatet plotësisht në bllok në madhësinë e saj maksimale.
Përparësia e këtyre vlerave është se ato nuk ndryshojnë raportin e pamjes, duke i lënë ato të njëjtat.
Gjithashtu, duhet të kuptoni se shtrirja e imazhit mund të çojë në një përkeqësim të cilësisë së tij. Mund të jap një shembull nga jeta dhe praktika reale e stilistëve. Gjithkush e di dhe e kupton që kur kodoni për desktop, duhet të përshtatni faqen në gjerësinë kryesore të monitorëve: 1280, 1366, 1920. Nëse merrni një imazh sfond me një madhësi, të themi, 1280 x 200 dhe nuk e vendosni atë me një madhësi sfondi, atëherë ekranet me një gjerësi janë më të mëdha do të shfaqet një hapësirë \u200b\u200bboshe, fotografia nuk do ta mbushë plotësisht gjerësinë.
Në 99% të rasteve, kjo nuk i përshtatet zhvilluesit të internetit, kështu që ai vendos madhësinë e sfondit: mbulesë në mënyrë që fotografia të shtrihet gjithmonë në gjerësinë maksimale të dritares. Ky është një mashtrim i mirë për t'u përdorur, por tani hasni në problemin që përdoruesit me një gjerësi ekrani prej 1920 pikselësh mund të shohin një foto me cilësi nën-optimale.
Më lejoni t'ju kujtoj se do të shtrihet në gjerësinë maksimale. Prandaj, cilësia automatikisht do të përkeqësohet. Zgjidhja e vetme e saktë këtu do të ishte përdorimi fillestar i një figure më të madhe - 1920 pixel i gjerë. Pastaj, në ekranet më të gjera, do të jetë në madhësinë e tij natyrore, dhe në të tjerët thjesht do të pritet ngadalë, por në të njëjtën kohë, me zgjedhjen e saktë të imazhit të sfondit, kjo nuk do të ndikojë në pamjen e faqes.
Në përgjithësi, ky është vetëm 1 shembull se si të përdorni njohuritë që keni fituar në këtë artikull kur krijoni faqosje reale.
Sfond gjysmë-transparent me css
Një mashtrim tjetër që mund të zbatohet duke përdorur css është një sfond gjysmë-transparent. Kjo do të thotë, përmes këtij sfondi do të jetë e mundur të shohim se çfarë fshihet pas tij.
Si shembull, unë do të vendos të gjithë faqen si imazhin e sfondit që kemi përdorur më parë në shembuj. Për bllokun me identifikuesin bg, në të cilin po kryejmë të gjitha eksperimentet tona, ne do të vendosim sfondin duke përdorur formatin e ngjyrës rgba.
Siç thashë më parë, ka shumë formate në css për vendosjen e ngjyrave. Njëri prej tyre është rgb, një format mjaft i njohur për ata që punojnë në redaktorët grafikë. Writtenshtë shkruar kështu: rgb (17, 255, 34);
Vlera e parë në kllapa është ngopja me të kuqe, pastaj jeshile, pastaj blu. Vlera mund të jetë numerike nga 0 në 255. Prandaj, formati rgba nuk është i ndryshëm, shtohet vetëm një parametër më shumë - kanali alfa. Vlera mund të jetë nga 0 në 1, ku 0 është transparencë e plotë.
informacion i shkurtër
Versione të CSS
Vlerat
url Shtegu për tek skedari grafik, i cili specifikohet brenda konstruksionit url (), përdoret si vlerë. Në këtë rast, rruga për tek skedari mund të shkruhet ose në thonjëza (dy ose dy), ose pa to. asnjë Anulon imazhin e sfondit për elementin. trashëgoni Trashëgon vlerën nga prindi.HTML5 CSS2.1 IE Cr Op Sa Fx
Modeli i objektit
dokument.getElementById ("elementID") .style.backgroundImage
Shfletuesit
Internet Explorer 7.0 ose më vonë zbaton një sfond në brendësi të kufirit të një elementi që ka caktuar vetinë e tij Layout. Nëse elementi nuk ka një Layout, prona e imazhit të sfondit do të respektojë kufijtë e elementit siç specifikohet në specifikim. Diferenca në ekran do të vërehet nëse kufijtë janë të prishur ose të pikëzuar në vend se të fortë.
Nëse elementi është vendosur të lëvizë ose automatikisht, Internet Explorer 8 do të ketë një vonesë vertikale me një pixel kur sfondi të lëvizë.
Internet Explorer 7.0 ose më i ri nuk e mbështet vlerën e trashëguar.
Nëse sfondi është vendosur për një rresht tryeze (etiketë
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Rezultati i këtij shembulli në shfletuesin Chrome është treguar në Fig. 1. Shfletuesi Internet Explorer, Opera dhe Firefox shfaqin saktë sfondin e linjës (Fig. 2).
Figura: 1. Përsëritja e sfondit për secilën qelizë
Figura: 2. Sfondi për të gjithë linjën
Unë mendoj se nuk ka një sit të vetëm ku prona nuk përdoret Sfondi i CSS... Do të duket se çfarë mund të jetë më e thjeshtë se kjo pronë? Por jo, aftësitë e tij janë shumë më të gjera se qëllimi i zakonshëm i një fotoje ose ngjyre si sfondi i një faqeje. Diçka do të jetë e njohur, por diçka me siguri do të bëhet një risi për shumë njerëz. Në çdo rast, do të jetë e dobishme të dimë plotësisht se si funksionon sfondi.
CSS3 ka sjellë shumë gjëra të reja në pronë, kjo është transparenca dhe caktimi i imazheve të shumta si sfond, por ne do të flasim për këtë më poshtë, dhe së pari le të shohim bazat e pronës. sfond.
ngjyrë e sfondit
Jam shumë i sigurt që keni bërë detyra të ngjyrave të sfondit disa herë. Kjo mund të bëhet duke përdorur disa lloje të shënimeve: i rregullt (përdoret emri i ngjyrës), shënimi heksadecimal ose RGB. Secili lloj është i barabartë, 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 ka mbështetje për transparencën, kështu që mund ta shtoni në ngjyrën tonë, si kjo:
P (ngjyra e sfondit: rgba (255, 0, 0, 0,5);)
Shifra e fundit u vendos në 50% transparencë. Mund të vendosni vlerën e transparencës nga 0 (sfond plotësisht transparent) në 1 (plotësisht i errët).
sfond-imazh
Kjo pronë përdoret gjithashtu shumë shpesh, ju lejon të caktoni një imazh në sfond. CSS3 shton aftësinë për të caktuar shumë imazhe në sfond, dhe secila krijon një lloj shtrese, kështu që secila pasuese mbivendoset mbi atë të mëparshme. Pse mund të jetë e dobishme kjo? Gjithçka është mjaft e thjeshtë - le të themi se duhet të mbërthesh gjërat e vogla në secilin cep të faqes. Sigurimi i një paraqitjeje 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ë cepin e vet dhe kaq, problemi është zgjidhur
Trupi (sfond-imazh: url ("image1"), url ("image2"), url ("image3"))
Nëse keni nevojë të caktoni një imazh në sfond, ne e lëmë vetëm të parën në kod, mendoj se kjo është e kuptueshme.
Kur përdorni ndonjë imazh si sfond, duhen mbajtur parasysh dy rregulla:
- vendosni një ngjyrë sfondi të kundërta në rast se përdoruesi nuk mund të shfaqë një fotografi për ndonjë arsye. Mund të çaktivizojë shfaqjen e imazheve, kursen trafik.
- mos përdorni një imazh sfondi për të përcjellë ndonjë informacion të rëndësishëm. Për arsyen e thënë më sipër, përdoruesi mund të mos e shohë atë.
Mbështetja për imazhe të shumta në sfond është mjaft e gjerë. Të gjithë shfletuesit, madje edhe IE8, e mbështesin këtë pronë.
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 (imazh, përsëritje, ngjyra, bashkëngjitje). Epo, mos harrojmë të përmendim rregullin e përbërë nga Sfondi.
Nuk ka asgjë të vështirë në këtë, por ka disa hollësi dhe nuanca të caktuara që duhet të dini për një model të gatshëm (mos harroni për këtë do t'ju ndihmojë të hapni të gjitha hollësitë e çdo dizajni).
Më lejoni t'ju kujtoj edhe një herë se ky artikull është pjesë e një serie dhe do të ishte më së miri që së pari të filloni të mësoni shënimin e stilit, përkatësisht me një artikull në lidhje me atë që është CSS dhe me çfarë hahet, mirë, dhe pastaj të ndiqni sipas renditjes së dhënë në referencë. Megjithëse, në çdo rast, varet nga ju, por tani le të flasim për vendosjen e sfondit.
Ngjyra, sfondi-ngjyra dhe sfondi-imazhi
Le të shohim së pari 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ë plotësisht normale dhe 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, të vendosur pas shenjës së hashit (hash - "# fe35a3"), ose duke përdorur tre shifra, nëse e para përputhet me vlerën e së dytës, e treta përkatësisht e katërta, dhe e pesta, me të gjashtën (kodi i ngjyrës "# aa33ff" mund të shkurtohet si "a3f").
Gjithashtu, ngjyrat në kodin Html dhe Css mund të paraqiten 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 ndryshe nga ngjyra e të gjithë paragrafëve të tjerë (më e errët), e cila është vendosur si # 555 në skedarin CSS të temës WordPress që po përdor. Por vendosja e ngjyrës përmes ngjyrës është mjaft e thjeshtë, por me sfondin do të jetë pak më e vështirë.
Kështu që, për sfond në css ekzistojnë pesë rregulla që, nëse dëshirohet, mund të kombinohen në një ekip. Për t'i parë, mund të shkoni në faqen e specifikimit aktual W3C dhe të kërkoni diçka me fjalën Sfond:
- ngjyra e sfondit - kjo rregull përcakton ngjyrën e sfondit për çdo element Html. Në të, mund të përdorni ose kodin ose emrin e hijes, d.m.th. gjithçka është saktësisht siç ishte kur përdorni ngjyrën.
imazhi i sfondit - me të mund të përdorni një fotografi si sfond (por sigurohuni të lexoni për këtë, sepse fotografitë e mëdha do të ngadalësojnë ngarkimin e faqes), rruga drejt së cilës do të specifikohet në funksionalitetin e url ().
Nëse shikoni specin, do ta shihni atë ngjyra e paracaktuar e sfondit çdo element do të jetë transparent (vlera e paracaktuar e rregullit është "background-color: transparent"). Sidoqoftë, në elemente do të jetë jo-transparent si parazgjedhje, pasi që këto janë elemente të sistemit dhe ato kanë gjithçka ndryshe dhe ndryshe nga etiketat e zakonshme të gjuhës së shënjimit të hipertekstit.
Ngjyra e ngjyrës së sfondit është vendosur si standard (gjashtë ose tre shifra të një kodi 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ë pikërisht më sipër.
Të katër rregullat e tjera të CSS-së do të kenë të bëjnë vetëm me imazhin e sfondit, i cili mund të vendoset për çdo element Html dhe, nëse dëshiron, të pozicionohet saktësisht. Cili skedar grafik do të përdoret mund të vendoset duke përdorur sfond-imazh.
Nëse shikoni specifikimin e gjuhës së shënjimit të stilit, do të shihni se imazhi i parazgjedhur i sfondit është "asnjë" (dmth. Nuk përdoret asnjë imazh sfondi). Epo, nëse akoma ju nevojitet, atëherë në funksionin url () do të duhet të specifikoni rrugën për të:
Imazhi i sfondit: 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, rruga drejt së cilës përshkruhet pikërisht më lart. Ju mund të shihni se e gjithë zona e caktuar për këtë paragraf është e mbuluar me një imazh përsëritës, i cili në origjinal duket kështu:
Ata. kur përdorni vetëm një rregull të figurës së sfondit që tregon shtegun drejt skedarit grafik, vetë ky imazh do të shumëzohet vertikalisht dhe horizontalisht derisa të mbulojë të gjithë zonën e caktuar në faqen e internetit për këtë element specifik Html (në tonë shembull, ishte një paragraf). Pse ndodh?
Përsëritja e sfondit - përsëritni imazhin e sfondit
Po, sepse ne nuk kemi shkruar ndonjë vlerë për rregullin CSS sfond-përsëritje, 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ëritjen" (përsëritja e imazhit përgjatë të gjitha boshteve). Përgjigja doli vetë.
Prandaj, me përsëritje të sfondit mundemi menaxhoni përsëritjet e fotos së sfondit... Ky rregull mund të ketë vetëm katër vlera:
Pozicioni i sfondit - pozicionimi i sfondit
Tani shtrohet pyetja, a është e mundur të zhvendoset imazhi i sfondit nga këndi i sipërm i majtë i zonës duke kufizuar madhësinë e elementit. Sigurisht që mundeni, dhe për këtë qëllim ekziston një rregull i veçantë sfond-pozicion:
Duke parë specifikimin e CSS, bëhet e qartë pse imazhi i sfondit të paracaktuar ndodhet pikërisht në skajin e sipërm të majtë të zonës së elementit Html. Për shkak se vlera "0% 0%" është e paracaktuar për rregullin e pozicionit të sfondit.
Epo, kur ky rregull nuk është vendosur në mënyrë të qartë për një element (si në rastin tonë), atëherë shfletuesi zgjedh vlerën e tij që pranohet në specifikim si parazgjedhje (vini re se boshtet e koordinatave në CSS raportohen vetëm nga skaji i sipërm i majtë i zonës element).
Shihet gjithashtu nga specifikimi që të dy vlerat relative (përqindje) dhe 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 disa vlera numerike. Por gjërat e para së pari.
Kur vendosni pozicionimin e imazhit të sfondit duke përdorur njësi absolute në pozicionin e sfondit, zhvillohet parimi vijues i përcaktimit të pozicionit të tij përfundimtar:
Ata. shfletuesi do të llogarisë kompensimet e specifikuara përgjatë boshteve X dhe Y nga origjina e zonës në të cilën është pozicionuar objekti deri tek origjina e vetë këtij imazhi. Për shembull, në këtë paragraf, unë kam pozicionuar imazhin e sfondit përmes pozicionit të sfondit duke përdorur rregullat e mëposhtme CSS:
Imazhi i sfondit: url (https: //site/image/logo.png); sfond-përsëritje: jo-përsëritje; pozicioni i sfondit: 400px 25px;
Ju lutemi vini re se në këtë rast do të rreshtohet në qendër të pamjes dhe jo në qendër të zonës së caktuar për këto paragrafë. Shtë e qartë se në të vërtetë një rregullim i tillë i imazhit të sfondit nuk ka gjasa të gjejë zbatim.
Sidoqoftë, 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ë kjo fotografi do të jetë gjithmonë e dukshme në portën e shikimit dhe kjo është saktësisht përdorimi i pronës CSS të bashkëngjitjes në sfond në paraqitja moderne e bllokut.
A ka edhe ca të tjera rregulli parafabrik Sfondi, 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 qartë, shfletuesi do ta konsiderojë të barabartë me vlerën e paracaktuar.
Png) pa përsëritje 50%;
Rregulli i montimit i treguar në shembull zbatohet në këtë paragraf për qartësi. Doli jo e bukur, por kjo nuk është gjëja kryesore. Për këtë paragraf, përdoret një mbushje e çuditshme e sfondit të verdhë, si dhe një imazh i logos LiveInternet, i rreshtuar në qendër të paragrafit. Sepse nuk është përcaktuar asnjë vlerë për rregullin e bashkëngjitjes në sfond, atëherë përdoret vlera e paracaktuar e lëvizjes.
Nëse për ndonjë element dëshironi të vendosni vetëm një mbushje me ngjyra dhe mos u shqetësoni me imazhin e sfondit, atëherë mund të vendosni:
Ngjyra e sfondit: #FEFCDE
shkruaj:
Sfondi: #FEFCDE
Për të gjitha vlerat e tjera të rregullit të kombinuar do të merren si parazgjedhje, dhe kjo është ajo që ju duhej.
Paç fat! Shihemi së shpejti në faqet e faqes së blogut
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ë vendosni alternimin e ngjyrës së sfondit të rreshtave të tabelave, listave dhe elementeve të tjerë HTML në sit duke përdorur klasën pseudo të fëmijëve të n-të 
Pozicioni (absolut, relativ dhe fiks) - mënyrat e pozicionimit të elementeve Html në CSS (rregullat majtas, djathtas, lart dhe poshtë) 
Ndrysho dhe pastro në CSS - mjetet e paraqitjes së bllokut 
Pozicionimi me indeksin Z dhe rregullin e kursorit CSS për të ndryshuar kursorin e miut 
Mbushja, Margjina dhe Kufiri - ne vendosim kufijtë e brendshëm dhe të jashtëm në CSS, si dhe kufijtë për të gjitha anët (lart, poshtë, majtas, djathtas) 
Shfaq (bllok, asnjë, inline) në CSS - vendosni llojin e shfaqjes së elementeve Html në faqen e internetit 
Prioritetet CSS dhe Nxitja me Kombinim dhe Grupim të Rëndësishëm të Përzgjedhësve, Stilet e Përshtatura dhe të Autorit 
CSS - çfarë është ajo, si lidhen fletët e stilit kaskadë me kodin HTML duke përdorur Style dhe Link 
Përzgjedhësit e etiketave, klasave, Id dhe gjenerike, si dhe përzgjedhësit e atributeve në CSS moderne