Me ardhjen e CSS3, puna e projektuesve të faqosjes është bërë shumë më e lehtë dhe më logjike: tani ju mund të personalizoni me të vërtetë në mënyrë fleksibël çdo objekt, duke përdorur JavaScript gjithnjë e më pak. Le të themi se duhet të rregulloni transparencën e sfondit - CSS ofron menjëherë disa opsione.
Sfondi caktohet nga një grup atributesh, sfond-përsëritje, sfond-bashkëngjitje, sfond-origjina, sfond-clip, sfond-ngjyra), dhe secila prej tyre mund të shkruhet veçmas ose të kombinohet nën atributin e sfondit. Le të hedhim një vështrim më të afërt në secilën prej tyre.
Atributi i ngjyrës së sfondit
Edhe IE8 e mbështet këtë metodë. Disa imazhe përdoren si sfond për paraqitjen e lëngshme. Gjëja kryesore, mos harroni kur përdorni ndonjë imazh, të vendosur gjithashtu Ngjyra CSS sfond, pasi përdoruesit thjesht mund të mos kenë një fotografi të ngarkuar.
Atributi sfond-pozicion
Nëse po përdorni një imazh për të vendosur sfondin e një blloku, CSS do t'ju lejojë të poziciononi imazhin kudo në ekran. Si parazgjedhje, imazhi pozicionohet në të majtë këndi i sipërm... Atributi pranon ose tregues verbalë (lart, poshtë, majtas, djathtas) ose tregues numerik (përqindje, pikselë dhe njësi të tjera). Në këtë rast, duhet të specifikoni dy vlera: horizontalisht dhe vertikalisht:
trupi (pozicioni i sfondit: qendra djathtas;) - në këtë shembull, sfondi do të vendoset në anën e djathtë të faqes dhe distancat e sipërme dhe të poshtme me imazhin janë të njëjta.
Atributi i madhësisë së sfondit
Ndonjëherë kërkohet me duke përdorur CSS shtrini sfondin ose zvogëloni madhësinë e tij. Për këtë, përdoret atributi i madhësisë së sfondit dhe madhësia e sfondit mund të vendoset si në pikselë ose në përqindje, ashtu edhe në çdo njësi tjetër matëse.
Ka disa probleme me këtë atribut: për shfaqja e saktë sfondi në versionet e mëparshme të shfletuesve duhet të përdorë parashtesa. Sigurisht, versionet aktuale mbështesin plotësisht këtë atribut dhe nevoja për veçori specifike është zhdukur.
Atributi i bashkëngjitjes së sfondit
Ky atribut specifikon sjelljen e lëvizjes së imazhit të sfondit. Pra, mund të marrë 3 vlera (me përjashtim të trashëgimisë, e cila është e zakonshme për të gjitha atributet e paraqitura në këtë artikull):
- fikse- e bën figurën në sfond të palëvizshëm;
- rrotulloni- sfondi rrotullohet së bashku me pjesën tjetër të elementeve;
- lokal- imazhi në sfond lëviz nëse përmbajtja ka lëvizje. Sfondet që shkojnë përtej përmbajtjes janë kapur.
Shembull përdorimi:
trupi (sfondi-lidhja e fiksuar).
Firefox-i aktualisht nuk e mbështet pronën e fundit (lokale).
Atributi i origjinës së sfondit
Ky atribut është përgjegjës për pozicionimin e elementit. Shfletuesit versionet e hershme kërkojnë përdorimin e parashtesave. Vetë prona ka tre parametra:
- mbushje-kuti pozicionon sfondin në lidhje me skajin, duke marrë parasysh trashësinë e kornizës;
- kuti-kufi ndryshon nga vetia e mëparshme në atë që vija kufitare mund të mbivendos plotësisht ose pjesërisht sfondin;
- përmbajtje-kuti pozicionon imazhin duke e lidhur me përmbajtjen.
Nëse jepen vlera të shumta, shfletuesit mund të reagojnë ndryshe: Firefox dhe Opera pranojnë vetëm opsionin e parë.
Atributi i përsëritjes së sfondit
Në mënyrë tipike, nëse një sfond përcaktohet nga një imazh, ai duhet të përsëritet horizontalisht ose vertikalisht. Për këtë shërben atributi i përsëritjes së sfondit. Pra, sfondi i një blloku CSS i të cilit përmban një pronë të tillë mund të ketë një nga disa parametra:
- mos përsëritje- imazhi shfaqet në faqe në një version të vetëm;
- përsëritni- sfondi përsëritet përgjatë boshteve x dhe y;
- përsërit-x- vetëm horizontalisht;
- përsërit-y- vetëm vertikalisht;
- hapësirë- sfondi përsëritet, por nëse hapësira nuk mund të plotësohet, atëherë shfaqen boshllëqe midis fotografive;
- rrumbullakët- imazhi është i shkallëzuar nëse është e pamundur të mbushet e gjithë zona me fotografi të tëra.
Një shembull i përdorimit të atributit:
trupi (përsëritje në sfond: përsëritje pa përsëritje)- në mënyrë të ngjashme sfond-përsërit: përsërit-y.
Në CSS3, është e mundur të vendosni vlera për imazhe të shumta duke renditur parametrat të ndarë me presje.
Atributi i klipit të sfondit
Ky atribut përcakton sjelljen e sfondit nën kufijtë (për shembull, në rastin e kufijve të ndërprerë):
- mbushje-kuti- sfondi shfaqet rreptësisht brenda bllokut;
- kuti-kufi- imazhi shkon nën korniza;
- përmbajtje-kuti- fotografia në sfond shfaqet vetëm brenda përmbajtjes.
Shembull përdorimi:
trupi (background-clip: përmbajtje-kuti;).
Chrom dhe Safari kërkojnë prefiksin -webkit-.
Opaciteti dhe atributet e filtrit
Atributi opacity ju lejon të vendosni transparencën e sfondit - vetia CSS do të funksionojë në të gjithë shfletuesit. Vlera është vendosur në intervalin nga 0,0 në 1,0 përfshirëse. Me këtë, ju mund të vendosni transparencën Sfondi CSS pa vlerë të plotë: në vend të 0.3 mjafton të shkruani 3:
.blloku (background-image: url (img.png); opacity: .3;).
Për të vendosur transparencën e sfondit, CSS e të cilit do të funksionojë edhe për IE nën versionin e nëntë, përdorni atributin e filtrit:
.blloku (imazhi i sfondit: url (img.png); filtri: alfa (opaciteti = 30);).
Në këtë rast, opacity vendoset midis 0 dhe 100. Vini re se atributi i opacity është i ndryshëm nga cilësimi i opacity me duke përdorur RGBA trashëgimia: kur përdoret tejdukshmëria transparente bëhet jo vetëm sfondi, por edhe të gjithë elementët brenda bllokut.
Ndiqni gjithmonë statistikat e përdorimit të shfletuesve në CIS dhe në të gjitha vendet e tjera. Më së shumti një problem i madh Të gjithë projektuesit e paraqitjes janë versione të vjetra të IE, ata nuk lejojnë përdorimin e plotë të CSS3. Kur make up, mos harroni të përdorni shërbime speciale që kontrolloni nëse shfletuesi juaj mbështet ndonjë Vetia CSS... Nëse nuk mund të instaloni versionet e vjetra të shfletuesve, gjeni një shërbim që do të kontrollojë sitin shfletues të ndryshëm online.
Specifikon imazhin që do të përdoret si foto sfondi qelizat e tabelës. Ndryshe nga imazhet e zakonshme, sfondi nuk vendoset në gjerësi dhe lartësi dhe shfaqet gjithmonë në madhësinë e plotë dhe shkallëzohet në 100%. Nëse fotografia është më e vogël se gjerësia ose lartësia e qelizës në madhësi, atëherë fotografia përsëritet horizontalisht djathtas dhe poshtë, duke u rreshtuar si një mozaik. Për këtë arsye, në kryqëzim fotot e sfondit mund të ketë rënie të dukshme që janë të dukshme për vizitorët e faqes. Kur zgjidhni një imazh të sfondit, sigurohuni që të ketë kontrast të mjaftueshëm midis tij dhe përmbajtjes së qelizës. Lejohet gjithashtu përdorimi i imazheve të animuara si sfond. Formati GIF por ato shpërqendrojnë vëmendjen e lexuesve.
Sintaksë
vlerat
Çdo adresë e vlefshme imazhi - mund të përdorni një shteg relative ose absolute.
Vlera e paracaktuar
Shembull
| Qelizë me model sfondi |
shënim
Te pyesesh imazhi i sfondit për qelizën, përdorni veçorinë e stilit të sfondit duke e shtuar në përzgjedhësin td ose th.
| ... |
Shfletuesit
Konventat e mëposhtme përdoren në tabelën e shfletuesit.
- - elementi mbështetet plotësisht nga shfletuesi;
- - elementi nuk perceptohet nga shfletuesi dhe injorohet;
- - gjatë funksionimit, shfaqja e gabime të ndryshme, ose artikulli mbështetet me paralajmërime.
Numri tregon versionin e shfletuesit nga i cili mbështetet elementi.
Mendoj se nuk ka asnjë vend ku prona të mos përdoret Sfondi 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ë fotografie ose ngjyre si sfondi i faqes. Diçka do të jetë e njohur, por diçka me siguri do të bëhet një risi për shumëkënd. 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ë, 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 do të shohim bazat e pronës. sfond.
ngjyrë e sfondit
Jam shumë i sigurt që keni bërë disa herë detyra me ngjyra të 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ë i barabartë, përdorni cilindo që ju pëlqen më shumë. Mundohem të përdor versionin më të shkurtër, dhe për hir të perceptimit ë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;))
Ekziston mbështetje për transparencë në CSS3, kështu që ju mund ta shtoni atë në ngjyrën tonë, për shembull:
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 (sfondi 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 imazhe të shumta në sfond, dhe secila prej tyre krijon një lloj shtrese, kështu që secila pasuese mbivendoset mbi atë të mëparshme. Pse kjo mund të jetë e dobishme? Gjithçka është mjaft e thjeshtë - le të themi se duhet të lidhni gjërat e vogla në çdo cep të faqes. Me kusht pak a shumë paraqitje gome përdorimi i një imazhi nuk është një opsion. Prandaj, ne bëjmë 4 "shtresa", e zhvendosim çdo imazh në këndin e vet dhe kaq, problemi zgjidhet
Trupi (imazhi i sfondit: url ("image1"), url ("image2"), url ("image3"))
Nëse keni nevojë 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ë keni parasysh dy rregulla:
- pyesni ngjyra e kundërta sfond në rast se përdoruesi nuk shfaq një foto për ndonjë arsye. Mund të çaktivizojë shfaqjen e imazheve të buta, kursen trafikun.
- mos përdorni një imazh të sfondit për të përcjellë ndonjë informacion i rendesishem... 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ë.
