Funda mayelana ne-CSS3 Opacity

Ukwenza Imvelaphi Yakho Iphuthele

Enye yezinto ongazenza kalula ekuphrintiwe kodwa hhayi kwiWebhu yembethe umbhalo esithombeni noma imbala enemibala, futhi ushintshe ukukhanya kwalowo mfanekiso ukuze umbhalo uvele ngemuva. Kodwa kukhona indawo ku- CSS3 ezokuvumela ukuba ushintshe ukukhanya kwezakhi zakho ukuze ziphele futhi ziphume: i-opacity.

Indlela yokusebenzisa i-Property Opacity

Isakhiwo se-opacity sithatha inani le-transparency kusuka ku-0.0 kuya ku-1.0.

0.0 ingu-100% ebonakalayo-noma yini ngaphansi kwalesi sici izobonisa ngokuphelele. I-1.0 ingu-100% opaque-akukho ngaphansi kwesigaba esizobonisa.

Ngakho ukusetha isici ku-50% esobala, ungabhala:

i-opacity: 0.5;

Bona ezinye izibonelo zokusebenza okusebenzayo

Qinisekisa ukuthi Uvivinya kuziphequluli ezindala

IE 6 noma 7 ayisekeli impahla ye-CSS3. Kodwa awukho enhlanhleni. Esikhundleni salokho, i-IE isekela isihlungi se-alpha yendawo ye-Microsoft. Izihlungi ze-Alpha ku-IE zamukela amagugu avela ku-0 (ngokusobala) kuya ku-100 (opaque ngokuphelele). Ngakho, ukuze uthole ukukhanya kwakho ku-IE, kufanele ukwandise ukuvula kwakho nge-100 futhi wengeze isihlungi se-alpha kuzitayela zakho:

Isihlungi: i-alpha (opacity = 50);

Bona isihlungi se-alpha esenzweni (IE kuphela)

Futhi Sebenzisa Izibikezelo Zesiphequluli

Kufanele usebenzise i--moz- and -webkit- prefixes ukuze izinguqulo ezindala ze-Mozilla ne-Webkit iziphequluli zisekele nazo:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
i-opacity: 0.5;

Hlala ubeka kuqala iziphequluli zesiphequluli kuqala, futhi impahla evumelekile ye-CSS3 iphelile.

Hlola izibikezelo zesiphequluli kuziphequluli ezindala ze-Mozilla neWebkit.

Ungenza Izithombe Eziningi Eziqhakazile

Setha ukukhanya kwesithombe uqobo futhi kuzophela ngemuva. Lokhu kuyasiza ngempela emithonjeni yangemuva .

Futhi uma ufaka ithegi yesihange ungakha imiphumela ye-hover nje ngokushintsha ukukhanya kwesithombe.

i: hover img {
isihlungi: i-alpha (opacity = 50)
ukuhlunga: isandulela: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
i-opacity: 0.5;
}}

Ithinta le HTML:

Hlola izitayela ezingenhla ne-HTML esenzweni.

Beka Umbhalo Ezithombeni Zakho

Nge-opacity, ungabeka umbhalo phezu kwesithombe futhi ube nesithombe sibonakale siphelile lapho lowo mbhalo ukhona.

Le nqubo iyinkimbinkimbi encane, ngoba awukwazi ukumane ufeze isithombe, njengoba lokho kuzokwenzela isithombe sonke. Futhi awukwazi ukufeza ibhokisi lokubhala , ngoba umbhalo uzophelela lapho futhi.

1. Okokuqala udala isitsha se-DIV bese ubeka isithombe sakho ngaphakathi:

   
   

2. Landela isithombe nge-DIV engenalutho-yilokhu ozokwenza okusobala.

   
   
   

3. Into yokugcina oyifaka ku-HTML yakho yi-DIV enombhalo wakho kuwo:

   
   
   
   Lona yinja yami Shasta. Akuyona yini into enhle!

4. Uyayifaka ngesimo se-CSS, ukubeka umbhalo ngaphezulu kwesithombe. Ngabeka umbhalo wami ngakwesobunxele, kodwa ungawubeka ngakwesokudla ngokushintsha okubili kwesokunxele: 0; izakhiwo kuya kwesokudla: 0; .

   #image {
   isikhundla: isihlobo;
   ububanzi: 170px;
   ukuphakama: 128px;
   umkhawulo: 0;
   }}
   #text {
   isikhundla: ngokuphelele;
   phezulu: 0;
   kwesokunxele: 0;
   ububanzi: 60px;
   ukuphakama: 118px;
   isizinda: #fff;
   i-padding: 5px;
   }}
   #text {
   Isihlungi: i-alpha (opacity = 70);
   Isihlungi: isandulela: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   i-opacity: 0.7;
   }}
   #words {
   isikhundla: ngokuphelele;
   phezulu: 0;
   kwesokunxele: 0;
   ububanzi: 60px;
   ukuphakama: 118px;
   umlando: obala;
   i-padding: 5px;
   }}

Bona ukuthi kubonakala kanjani