Impahla CSS "obala" - indlela elula ukwenza nesayithi design ezithakazelisayo

Namuhla, ukudalwa website design isiba ifomu art. Lena akuyona nje iqoqo izakhi ikhasi umbala ezithile kanye nosayizi, amafonti izitayela ezahlukene kanye imidwebo thematic. Ukuze wenze site lakho ukuhluka kwabanye, ukuheha amehlo izivakashi 'futhi usithumele izakhi ezithile, wasebenzisa lenqwaba izindlela namathuluzi. Phakathi kwabo kukhona ethandwa kakhulu impahla CSS - obala. Le nqubo kuba impela imfashini kanye bubuhle, ngakho lisetshenziswa. Transparency anganika izinto Amakhasi ezahlukene isayithi - umbhalo block noma wonke picture, isibonelo. Liphinde izuzwe izindlela ezahlukene. Ake sihlole ngezansi.

Amapharamitha ucacise izakhi ngale

Amapharamitha lokulawula obala izakhi eziningana. Basuke esetshenzisiwe kuye izinhloso ezithile, kanye isiphequluli, okuyinto ngaphansi "kushintshwe" design. Lezi zinto zihlanganisa izakhiwo ezilandelayo:

• opacity;
• ukuhlunga;
• -PNG-image njengoba ngemuva.

Impahla ukubaluleka CSS "obala" baguqulelwa kanje: ayanda inombolo, ephansi ezingeni ngale kwalesi sakhi. I-opacity, ke kuyehluka kusuka 0 kuya 1, ngo lemifanekiso - kusuka 10 kuya 100 Futhi yokugcina isetshenziselwa Interet Explorer isiphequluli, kanye nazo zonke ezinye esebenzayo opacity nempahla.

Transparency Image (ekushintsheni)

Ake uqale nge izinketho ezovela okusobala uma uhambise into ngokuhudula igundane.

Ake sicabangele indlela ukuze ucacise obala yesithombe. CSS inikeza ezimbili izinketho. Ukuze wenze lokhu, kumele ubhalise ngqo ikhodi html-mbhalo kanje:

1. Cacisa indlela eya isithombe.
2. Sichaza kwemigomo obala lapho isikhombisi akuyona. Ukuze wenze lokhu, sebenzisa izakhiwo onmouseover futhi onmouseout, okuyinto sinquma amanani kanye opacity zokuhlunga.

Izici ezifanayo kungenziwa ebekiwe CSS-mbhalo futhi ikhodi yomthombo ukuze ungeze kuyo. Imiphumela Ihambe okufanayo.

Transparency yombhalo ekhasini amabhlogo

Kepha umbhalo noma ukuvimba (div ngale), CSS inikeza ukukhetha kwayo, efana ukudala umfanekiso esobala, kumele usebenzise exhunyiwe CSS-ifayela, lapho imingcele oyifunayo asethwe. Ungaya futhi ngendlela elula. Uma usetha isitayela block div isitayela noma umbhalo p libeke html-ikhodi elandelayo onmouseover futhi onmouseout izakhi. Bobabili ongakhetha ukusebenza futhi nemiphumela ebesiyilindele.

obala njalo

Kwezinye izimo, le obala bento, isici design noma umbhalo ufuna ukusetha njalo. Kulesi simo, ikhambi silula ngisho kuka uma udlula isikhombisi segundane.

CSS elementi ukuze obala uzonikezwa by ikhodi elandelayo. Ngo block div isitayela linqume amagugu sangemuva (isib # ff8800), opacity (isib, 0.5) kanye (ububanzi) kanye okokugxusha (ukupheda).

Ukuze isithombe ikhodi amanani okwenza kanye opacity lemifanekiso, futhi ucacise indlela eya isithombe.

RGBA-ndlela

Kukhona ezinye izinketho wokusebenzisa leli CSS impahla: obala singasebenza umbala isizinda kwanoma iyiphi isici design. Isebenzisa RGBA indlela. Izifiso zakhe zokuqala ezintathu izincwadi ume imibala eyisisekelo (obomvu, ukuqoqwa, loluhlata kwetjani), kanti owokugcina uyoba ngo --alpha, esibekela ezingeni obala. Ukusebenzisa RGBA-format sinquma obala, ezikhomba ukuba idijithi yokugcina. Ngokwesibonelo, njengoba: ingemuva: rgba (240,2,33,0.4035).

isiphetho

Ngakho, ngokusebenzisa ngokuhamba umsebenzi kusayithi design ezilula kodwa eziphumelelayo sici CSS "obala", ungenza izakhi zokukhekheleza mnandi futhi esikufezile. I embodiments echazwe kukhona ngokwezifiso izici obala kuzokusiza nale.