CSS background elubala. imvelaphi transparent okanye umbhalo nge CSS

Nokufika web abathungi CSS3 ukusebenza ngeendlela ezininzi iye lula okomqondo ngakumbi: emva koko, ngoku ngokwenene eguquguqukayo ukwenza nayiphi na into, alufane sokudala JavaScript. Masithi kufuneka ukunyenyisa elubala ngasemva - CSS nangoko inika iinketho eziliqela.

Imvelaphi buchazwa yintlaninge iimpawu (imvelaphi-umfanekiso, imvelaphi-sikhundla , imvelaphi-ubungakanani, imvelaphi-phinda, imvelaphi-attachment, imvelaphi-imvelaphi, imvelaphi-ikliphu, imvelaphi-umbala), iyileyo linokukwenziwa ngokwahlukileyo okanye idityaniswe phantsi lesiphumo imvelaphi. Makhe sihlolisise nganye ngokweenkcukacha.

Athi imvelaphi-umbala

Xa CSS, umbala ongasemva lingamiselwa ngeendlela ezininzi: usebenzisa hex ikhowudi, igama lombala okanye RGB-entry. Xa CSS3 kwaba kunokwenzeka ukuba ukusebenzisa endaweni RGB-sokurekhoda ukhetho kunye RGBA.

Hex ikhowudi umbala kubhaliweyo ipropati emva emkhusaneni: imvelaphi-umbala: # FFDAB9. Ukuba abalinganiswa kweli zamangenelo la ngababini ezifanayo, ikhowudi idla Imi kancane: # ccff00 angabhalwa # cf0:

umzimba {imvelaphi-umbala: # cf0 ;}.

Eli gama, nkqu imibala kakhulu exotic. Ngokomzekelo, ukongezelela abomvu namhlophe ungasebenzisa NavajoWhite (#FFDEAD) okanye Honeydew2 (# E0EEE0) standard:

umzimba {imvelaphi-umbala: ebomvu; }.

Le ndlela yokugqibela yi RGB okanye RGBA ukungena ikuvumela ukuba ukhankanye umbala nje kuphela kodwa elubala ngasemva CSS, kodwa indlela isebenza kuphela IE iinguqulelo zakudala kwama-9. Ezinye iibrawuza baqaphele umboniso oqhelekileyo obala. Ngokwemigangatho W3C ngayo Kukhethwa ukuba usebenzise nangoku RGBA endaweni RGB ngaphezu kwesiqhelo.

Ixabiso lokugqibela RGBA imvelaphi kwaye icwangcisa semenu 0 (elubala) 1 (ngaphaya).

Kukho ezinye izinto ezingaqhelekanga. Umbala ongasemva unako ukuzicwangcisa usebenzisa isixhobo se HSL kunye HSLA. Omabini zongezwa CSS3, kwaye ke ngoko ayixhaswa yi IE uguqulelo 9 okanye ngaphezulu. Embodiments RGB efanayo okanye RGBA, kuphela ifomati eyahlukileyo: Hue (umthunzi - ixabiso kwivili umbala, enikwe degrees), kuwanelisa (Ukwanda - umbala ngobunzulu njengepesenti, ukusuka kwi-0 ukuya kwi-100), ndandifeketha (ndandifeketha - ukukhanya, kulinganiswa ngokufanayo parameter kuwanelisa ).

Athi imvelaphi-umfanekiso

I-cross-browser version uninzi imvelaphi ngaphaya - oku ukusebenzisa mfanekiso. Xa CSS3, ungacwangcisa imifanekiso ngakumbi, oku kwenziwa ngokusebenzisa isiphumlisi. umzekelo:

{Umfanekiso ongasemva-umzimba: url (bg1.png), url (bg2.png)}.

Le ndlela zokuxhasa nokuba IE8. imifanekiso emininzi yangasemva irabha esetyenziswa kwi layout. Okubalulekileyo, musa ukulibala ukusebenzisa nawuphi na umfanekiso kunye ukucwangcisa umbala ongasemva le CSS, njengoko abasebenzisi ukulayisha nje umfanekiso.

Athi imvelaphi-isikhundla

Ukuba usebenzisa umfanekiso ukumisela iyunithi ngasemva, CSS ikuvumela ukuba lokubeka umfanekiso naphi kwikhusi. Ngokungagqibekanga, umfanekiso ise kwikona ephezulu ekhohlo. Uphawu kuthatha nokuba imiyalelo yomlomo (phezulu, ezantsi, ekhohlo, ekunene), kwamanani (inzala, pixels kunye nezinye iiyunithi). Kulo mzekelo, kufuneka khankanya amaxabiso amabini, othe tye kunye nkqo:

umzimba {imvelaphi-isikhundla: iziko elifanelekileyo ;} - kule Umzekelo, umlinganiselo iya kuba kwicala lasekunene lwephepha, phezulu nasezantsi yomfanekiso umgama ukuya elifanayo.

Athi imvelaphi-ubungakanani

Maxa wambi kuyimfuneko ukuba olule yangasemva CSS okanye sinciphise ubukhulu bayo. Ukuze wenze oku, sebenzisa lesiphumo imvelaphi-ubungakanani, kwaye ubungakanani kwisiqalo zingasetwa pixels okanye iipesenti, kunye nezinye iiyunithi.

Xa olu phawu, kukho ezinye iingxaki: ngokuba ukubonisa echanileyo imvelaphi kwinguqulelo ngaphambi isikhangeli izimaphambili eziza kusetyenziswa. Kakade ke, uguqulelo yangoku zixhasa ngokupheleleyo olu phawu kunye nemfuneko kwiipropati ezithile shwaka.

Athi imvelaphi-attachment

Olu phawu luchaza indlela aziphatha ngayo imifanekiso yesiqalo ngelixa ebonakalayo. Ngoko ke, oko kuthatha amaxabiso 3 (hayi kuquka ilifa, iyonke ngenxa zonke iimpawu ngazo kweli nqaku):

• fixed - yenza umfanekiso kwisiqalo ezinamanqwanqwa;
• mqulu - imisongo imvelaphi kunye nezinye izinto;
• zendawo - umfanekiso wesiqalo scrolled ukuba ebonakalayo eye umxholo. Imvelaphi engaphaya imixholo isakhelo esiqingqiweyo.

Umzekelo ukusebenzisa:

umzimba {imvelaphi-attachment esisigxina}.

Okwangoku, Firefox awuxhasi impahla yokugqibela (local).

Athi imvelaphi-imvelaphi

Olu phawu inoxanduva element endaweni. browser Early ifuna ukusetyenziswa izimaphambili. Lo mhlaba kukodwa parameters ezintathu:

• padding-bhokisi ikwindawo ngokunxulumene ngokomfuziselo kwikona, lo gama kuthathelwa ingqalelo ububanzi yesakhelo;
• umda-ibhokisi iipropati ezahlukeneyo ukusuka odlulileyo ukuba kumgca womda kunokuba ngokupheleleyo okanye ngokuyinxenye ayangenana ipateni;
• umxholo-ibhokisi lomfanekiso endaweni pryavyazyvaya umxholo wayo.

Ukuba khankanya amaxabiso ezininzi, ngoko bakhangeli kungaba asabela ngendlela yabo: Firefox kunye Opera ndiyabona kuphela ukhetho lokuqala.

Athi imvelaphi-phinda

Njengoko umthetho, ukuba umfanekiso wokungasemva ikhankanyiwe, kufuneka uphindaphindwe tye okanye nkqo. Kuba oku yaye basebenzisa lesiphumo imvelaphi-phinda. Ngenxa yoko, block imvelaphi, CSS eliqulethe propati unokuba enye ezininzi iparameters:

• no-phinda - umfanekiso ivela kwiphepha iyinguqulelo eyodwa;
• phinda - imvelaphi iyaphindwa x no y;
• phinda-x - tye kuphela;
• phinda-y - ngokuthe nkqo;
• isithuba - wesiqalo kuphindwa, kodwa ukuba isithuba akunakwenzeka ukuba bazalise phakathi imifanekiso kuvela engenanto;
• ngeenxa - umfanekiso kuphakathi, ukuba ngaba bazalise indawo yonke imifanekiso yonke.

Umzekelo i iimpawu:

: {Ndawo yangasemva-phinda umzimba - phinda phinda} efanayo imvelaphi-phinda: phinda-y.

Xa CSS3 inokuba khankanya amaxabiso for imifanekiso ezininzi xa usenza uluhlu parameters, wodwa ngeziphumlisi.

Athi imvelaphi-ikliphu

Olu phawu ichaza imo imvelaphi phantsi imida (umz, kwimeko kwizakhelo echokoziweyo):

• padding-ibhokisi - imvelaphi eboniswe embindini block;
• umda-ibhokisi - umfanekiso uza phantsi-sikhokelo;
• Umxholo-ibhokisi - umfanekiso kwisiqalo kuvela kuphela ngaphakathi umxholo.

Umzekelo ukusebenzisa:

umzimba {imvelaphi-ikliphu: content- ibhokisi;}.

Chrom no Safari zifuna isimaphambili -webkit-.

iimpawu lokukhanya kunye lokucoca ulwelo

Ibar lesiphumo ikuvumela ukuba ukucwangcisa elubala ngasemva - ipropati CSS ziya kusebenza kuzo zonke izikhangeli. Ixabiso bunikwa kuluhlu ukususela 0.0 ukuya 1.0 ebandakanya wonke. Kulo mzekelo, uyakwazi ukubeka elubala ngasemva CSS akukho ixabiso elipheleleyo endaweni 0.3 kwanele ukuba abhale .3:

.block {imvelaphi-umfanekiso: url ( img.png); Ibar: 3;}.

Ukuseta semenu ngasemva, CSS ilungele nkqu IE ngezantsi uguqulelo yesithoba, sebenzisa uphawu lokucoca:

.block {imvelaphi-umfanekiso: url ( img.png); icebo lokucoca: alpha (Ibar = 30)}.

Kulo mzekelo, ixabiso semenu ibekwe phakathi kwe-0 no-100 Qaphela ukuba semenu nokuchazwa izicwangciso ezahlukeneyo izinto elubala nge RGBA ilifa: xa usebenzisa Ibar kucaca nje kuphela imvelaphi, kodwa zonke izinto ngaphakathi yunithi.

Soloko iliso izibalo zakho yokusebenzisa ku bakhangeli beencwadi ico kunye onke amanye amazwe. Eyona ngxaki inkulu zonke Dube - iinguqulelo ezindala IE, kodwa musa ukuvumela ukuba usebenzise kangangoko CSS3 ngokupheleleyo. Xa layout musa ukulibala ukusebenzisa iinkonzo ezizodwa ezikhangela ukuba ibhrawuza yakho ixhasa nayiphi na ipropati CSS. Ukuba awukwazi ukufaka iinguqulelo ezindala bakhangeli beencwadi, ufumane inkonzo eza khangela umsebenzi isiza izikhangeli multiple-intanethi.