Jepni interesin tuaj vizual të internetit me grafikë të sfondit
Imazhet janë një pjesë e rëndësishme e hartimeve tërheqëse të internetit. Kjo përfshin përdorimin e imazheve të sfondit. Këto janë imazhet dhe grafikat që përdoren prapa zonave të një faqe në krahasim me imazhet që paraqiten si pjesë e faqeve të përmbajtjes. Këto imazhe sfondi mund të shtojnë interes vizual në një faqe dhe t'ju ndihmojnë të arrini dizajnin vizual që mund të kërkoni në një faqe.
Nëse fillon të punosh me imazhe të sfondit, pa dyshim do të futesh në skenarin ku dëshiron që një imazh të shtrihet për t'iu përshtatur faqes.
Kjo është veçanërisht e vërtetë për faqet e internetit të përgjegjshme që po dërgohen në një gamë të gjerë të pajisjeve dhe madhësive të ekranit .
Kjo dëshirë për të shtrirë një imazh të sfondit është një dëshirë shumë e zakonshme për web designers, sepse jo çdo imazh përshtatet në hapësirën e një faqe interneti. Në vend që të caktohet një madhësi fikse, shtrirja e imazhit lejon që të përkulet për të përshtatur faqen pa marrë parasysh sa e gjerë ose e ngushtë është dritarja e shfletuesit .
Mënyra më e mirë për të shtrirë një imazh për të përshtatur sfondin e një faqe është përdorimi i pronës CSS3 , për madhësinë e sfondit. Këtu është një shembull që përdor një imazh sfond për trupin e një faqeje dhe që përcakton madhësinë deri në 100% në mënyrë që gjithmonë të shtrihet për të përshtatur ekranin.
trupi {
sfondi: url (bgimage.jpg) jo-përsëritje;
madhësia e sfondit: 100%;
}
Sipas caniuse.com, kjo pronë funksionon në IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ dhe në të gjithë shfletuesit më të mëdhenj celularë. Kjo ju mbulon për të gjithë shfletuesit modern të disponueshëm sot, që do të thotë që ju duhet ta përdorni këtë pronë pa frikë se nuk do të funksionojë në ekranin e dikujt.
Faking një sfond të shtrirë në Browsers vjetër
Është shumë e vështirë që ju do të duhet të mbështetni ndonjë shfletues më të vjetër se IE9, por le të supozojmë se ju jeni të shqetësuar se IE8 nuk e mbështet këtë pronë. Në këtë rast, ju mund të bëni një sfond të shtrirë. Dhe mund të përdorni prefikset e shfletuesit për Firefox 3.6 (-moz-background-size) dhe Opera 10.0 (-o-background-size).
Mënyra më e lehtë për të rreme një imazh të shtrirë të sfondit është shtrirja e saj në të gjithë faqen. Pastaj nuk përfundoni me hapësirë shtesë ose duhet të shqetësoheni se teksti juaj përshtatet në zonën e shtrirë. Ja se si ta bëni këtë:
id = "bg" />
- Së pari, sigurohuni që të gjithë shfletuesit të kenë një lartësi 100%, 0 kufijtë dhe 0 mbushje në elementët HTML dhe BODY. Vendosni në vijim në krye të dokumentit tuaj HTML:
- Shtojeni imazhin që dëshironi të jeni sfondi si elementi i parë i faqes së internetit dhe jepni atë id të "bg":
- Pozicioni i imazhit të sfondit në mënyrë që të fiksohet në krye dhe në të majtë dhe është 100% i gjerë dhe 100% në lartësi. Shto këtë në fletën tuaj të stilit:
img # bg {
pozita: fikse;
lartë: 0;
e majtë: 0;
gjerësia: 100%;
lartësia: 100%;
} - Shto të gjithë përmbajtjen tënde në faqen brenda një elementi DIV me një id të "përmbajtjes". Shto DIV poshtë imazhit:
Shënim: Është interesante të shikosh faqen tënde tani. Imazhi duhet të shfaqet i shtrirë, por përmbajtja jote është plotësisht e humbur. Pse? Sepse imazhi i sfondit është 100% në lartësi dhe ndarja e përmbajtjes është pas imazhit në rrjedhën e dokumentit - shumica e shfletuesve nuk do ta shfaqin atë.Të gjithë përmbajtjen tënde këtu - përfshirë headers, paragraphs, etc.
- Poziconi përmbajtjen tuaj në mënyrë që ajo të jetë relative dhe të ketë një indeks z- 1. Kjo do ta sjellë atë mbi imazhin e sfondit në shfletuesit që përputhen me standardet. Shto këtë në fletën tuaj të stilit:
#content {
pozita: relative;
z-indeksi: 1;
}
- Por ju nuk jeni bërë. Internet Explorer 6 nuk është në përputhje me standardet dhe ende ka disa probleme. Ka shumë mënyra për të fshehur CSS nga çdo shfletues, por IE6, por më e lehtë (dhe më së paku mund të shkaktojë probleme të tjera) është përdorimi i komenteve të kushtëzuara. Vendosni sa vijon pas fletës tuaj të stilit në krye të dokumentit tuaj:
- Brenda komentit të theksuar, shtoni një stil tjetër me disa stilra për të marrë IE 6 për të luajtur bukur:
- Sigurohuni që të testoni edhe në IE 7 dhe IE 8. Ju mund të keni nevojë të rregulloni komentet për t'i mbështetur ato gjithashtu. Sidoqoftë, funksionoi kur e testova.
OK - kjo është pa dyshim WAY overkill. Shumë pak faqe duhet të mbështesin IE 7 ose 8 më shumë, më pak IE6!
Si e tillë, kjo qasje është e vjetëruar dhe ka gjasa të panevojshme për ju. E lë këtu më shumë si një model kurioziteti se sa shumë gjëra të vështira ishin përpara se të gjithë shfletuesit tonë të luanin kaq bukur së bashku!
Faking një imazh Sfondi Background mbi një hapësirë të vogël
Ju mund të përdorni një teknikë të ngjashme për të rreme një imazh sfond të shtrirë në një DIV ose një element tjetër në faqen tuaj të internetit. Kjo është paksa më e komplikuar pasi që duhet të përdorësh pozicionimin absolut ose të kesh çështje të çuditshme të hapësirës për pjesë të tjera të faqes tënde.
- Vendosni imazhin në faqen që dua të përdor si sfond.
- Në fletën e stilit, vendosni një gjerësi dhe lartësi për imazhin. Vini re, mund të përdorni përqindjet për gjerësi ose lartësi, por e gjej më të lehtë për t'u përshtatur me vlerat e gjatësisë për lartësinë.
img # bg {
gjerësia: 20m;
lartësia: 30m;
} - Vendosni përmbajtjen tuaj në një div me "përmbajtjen" id siç kemi bërë më lart:
Të gjithë përmbajtjen tënde këtu
- Stili i përmbajtjes div të jetë i njëjti gjerësi dhe lartësi si imazhi i sfondit:
div # content {
gjerësia: 20m;
lartësia: 30m;
} - Pastaj vendosni përmbajtjen deri në të njëjtën lartësi si imazhi. Pra, nëse imazhi juaj është 30em ju do të keni një stil të lartë: -30em; Mos harroni të vendosni një indeks z-1 për përmbajtjen.
#content {
pozita: relative;
lartë: -30em;
z-indeksi: 1;
gjerësia: 20m;
lartësia: 30m;
} - Pastaj shtoni në një indeks z-1 për përdoruesit e IE 6, siç keni bërë më lart:
Përsëri, me madhësinë e sfondit që gëzon përkrahjen e gjerë të shfletuesit që tani e bën, kjo qasje ka shumë gjasa edhe të panevojshme dhe paraqitet si produkt i një epoke të kaluar. Nëse dëshironi ta përdorni këtë qasje, sigurohuni që ta provoni këtë në sa më shumë shfletues sa mundeni.
Dhe nëse përmbajtja ndryshon madhësinë, do të duhet të ndryshoni madhësinë e enës tuaj dhe imazhin e sfondit, përndryshe do të përfundoni me rezultate të çuditshme.