Tgħallem dwar l-opaċità CSS3

Nagħmlu l-isfond trasparenti

Waħda mill-affarijiet li faċilment tista 'tagħmel fid-disinn stampat iżda mhux fuq il-Web hija text overlay fuq immaġni jew sfond ikkulurit, u tibdel it-trasparenza ta' dik l-immaġni sabiex it-test jinżel fl-isfond. Iżda hemm proprjetà f'CSS3 li tippermettilek tibdel l-opaċità ta 'l-elementi tiegħek sabiex dawn jisparixxu u joħorġu: l-opaċità.

Kif tuża l-Proprjetà tal-Opacity

Il-proprjetà tal-opaċità tieħu valur tal-ammont ta 'trasparenza minn 0.0 sa 1.0.

0.0 hija 100% trasparenti, xejn taħt dak l-element se juri kompletament. 1.0 hija 100% opaka-xejn anqas mill-element se jintwera permezz.

Allura biex issettja element għal 50% trasparenti, tikteb:

opaċità: 0.5;

Ara xi eżempji ta 'opaċità fl-azzjoni

Kun żgur li tittestja fil-Browsers Older

La l-IE 6 u lanqas is-7 ma jappoġġaw il-proprjetà tal-opaċità CSS3. Imma int mhux minn xortih. Minflok, IE jappoġġja filtru alfa ta 'proprjetà biss Microsoft. Il-filtri Alpha f'IE jaċċettaw valuri minn 0 (kompletament trasparenti) sa 100 (kompletament opaki). Allura, biex tikseb it-trasparenza tiegħek fl-IE, għandek timmultiplika l-opaċità tiegħek b'100 u żid filtru alfa għall-istili tiegħek:

filtru: alfa (opaċità = 50);

Ara l-filtru alfa fl-azzjoni (IE biss)

U Uża Prefissi tal-Browser

Għandek tuża l-prefissi -moz- u -webkit sabiex il-verżjonijiet anzjani tal-browsers ta 'Mozilla u Webkit jappoġġawha wkoll:

-webkit-opaċità: 0.5;
-moz-opaċità: 0.5;
opaċità: 0.5;

Dejjem poġġi l-prefissi tal-browser l-ewwel, u l-proprjetà CSS3 valida l-aħħar.

Ittestja l-prefissi tal-brawżer f'ħaddiema antiki tal-Mozilla u tal-Webkit.

Tista 'tagħmel immaġini trasparenti wisq

Issettja l-opaċità fuq l-immaġni nfisha u tintefa 'fl-isfond. Dan huwa tassew utli għal stampi ta 'sfond .

U jekk żid ma 'tikketta ta' l-ankra tista 'toħloq effetti ta' titqib biss billi tbiddel l-opaċità ta 'l-immaġini.

a: imbagħad img {
filtru: alfa (opaċità = 50)
filtru: progid: DXImageTransform.Microsoft.Alpha (opaċità = 50)
-moz-opaċità: 0.5;
-webkit-opaċità: 0.5;
opaċità: 0.5;
}

Jaffettwa dan l-HTML:

Ittestja l-istili t'hawn fuq u l-HTML fl-azzjoni.

Poġġi Test fuq Your Images

Bl-opaċità, tista 'tpoġġi t-test fuq immaġni u l-immaġni tidher li fade out fejn dak it-test huwa.

Din it-teknika hija xi ħaġa delikata, għaliex inti ma tistax sempliċement tiftaħ l-immaġni, għax dan se jisparixxi l-immaġni kollha. U inti ma tistax tgħib il -kaxxa tat-test , għax it-test se jisparixxi hemm ukoll.

1. L-ewwel toħloq kontenitur DIV u poġġi l-immaġni tiegħek ġewwa:

   
   

2. Segwi l-immaġini b'DIV vojt - dan huwa dak li ser tagħmel trasparenti.

   
   
   

3. L-aħħar ħaġa li żżid fl-HTML tiegħek hija d-DIV bit-test tiegħek fiha:

   
   
   
   Dan huwa kelb tiegħi Shasta. Hux hu ħelu!

4. Tistiljaha bil-pożizzjonament tas-CSS, biex tpoġġi t-test fuq l-immaġni. Fittijt it-test tiegħi fuq in-naħa tax-xellug, imma int tista 'poġġih fuq il-lemin billi tbiddel it-tnejn xellug: 0; proprjetajiet għal-lemin: 0; .

   #imagg {
   pożizzjoni: relattiva;
   wisa ': 170px;
   għoli: 128px;
   marġni: 0;
   }
   # test {
   pożizzjoni: assoluta;
   top: 0;
   xellug: 0;
   wisa ': 60px;
   għoli: 118px;
   isfond: #fff;
   ikkuttunar: 5px;
   }
   # test {
   filtru: alfa (opaċità = 70);
   filtru: progid: DXImageTransform.Microsoft.Alpha (opaċità = 70);
   -moz-opaċità: 0.70;
   opaċità: 0.7;
   }
   #words {
   pożizzjoni: assoluta;
   top: 0;
   xellug: 0;
   wisa ': 60px;
   għoli: 118px;
   sfond: trasparenti;
   ikkuttunar: 5px;
   }

Ara kif jidher