Koyi game da CSS3 Opacity

Yin Mahimman Bayananku

Ɗaya daga cikin abubuwan da zaka iya yi a cikin zane-zane amma ba a kan yanar gizon rubutu ba ne a kan hoto ko launin launi, kuma canza gaskiyar wannan hoton don rubutu ya ɓace a baya. Amma akwai dukiyar da ke cikin CSS3 wanda zai ba ka izini canza yanayin opacity daga abubuwanka don su fadi da kuma fita: opacity.

Yadda za a Yi Amfani da Abincin Opacity

Gidacen opacity yana ɗaukar adadin yawan gaskiyar daga 0.0 zuwa 1.0.

0.0 ne mai gaskiya 100% - duk abin da ke ƙasa da wannan kashi zai nuna gaba daya ta hanyar. 1.0 shi ne 100% nau'i-babu abinda ke ƙasa da kashi zai nuna ta.

Don haka don saita kashi zuwa 50% m, za ku rubuta:

opacity: 0.5;

Duba wasu misalan opacity a cikin aikin

Ka tabbata a gwada a cikin tsofaffi masu bincike

Babu IE 6 ko 7 suna tallafa wa dukiyar CSS3 opacity. Amma ba ku da fata. Maimakon haka, IE na goyan bayan kayan haɗin mallaka na Microsoft-kawai. Alpha samfurin a IE yarda da dabi'u daga 0 (gaba ɗaya) zuwa 100 (gaba daya opaque). Saboda haka, don samun gaskiyarka a IE, ya kamata ka ninka opacity ta 100 kuma ka ƙara adreshin alpha a cikin sassanka:

tace: alpha (opacity = 50);

Dubi harufa a cikin aiki (IE kawai)

Kuma Yi Amfani da Bayanin Bincike

Ya kamata ku yi amfani da prefixes -moz- da -webkit domin yadda tsofaffi masu bincike na Mozilla da Webkit su goyi bayan shi:

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

Koyaushe sanya prefixes na farko na bincike, da ƙimar CSS3 mai aiki na ƙarshe.

Gwada shafukan bincike na bincike a tsofaffi masu bincike na Mozilla da masu bincike.

Zaka iya yin Hotuna Gano Tsarin

Saita opacity a kan hoton da kanta kuma zai fadi cikin bango. Wannan yana da amfani ga siffofin bango .

Kuma idan ka ƙara a tag tag ka iya ƙirƙirar sakamako mai laushi ta hanyar canza yanayin opacity na hoton.

a: hover img {
tace: alpha (opacity = 50)
tace: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}

Ana shafar wannan HTML:

Gwada samfuran da aka sama da HTML a cikin aikin.

A sa Rubutu akan Abubuwanku

Tare da opacity, za ka iya sanya rubutu a kan wani hoton kuma samun hotunan yana ɓacewa inda wannan rubutu yake.

Wannan dabarar ta daɗaɗɗa ne, saboda ba za ku iya fadin hoton ba, saboda wannan zai fice dukan hoton. Kuma ba za ka iya katse akwatin rubutu ba , saboda rubutu zai mutu a can.

1. Da farko ka ƙirƙiri akwati DIV kuma sanya hotonka cikin:

   
   

2. Bi hoton tare da komai maras nauyi - wannan shine abin da zaka yi m.

   
   
   

3. Abu na karshe da ka kara a cikin HTML ɗinka shine DIV tare da rubutu a ciki:

   
   
   
   Wannan shi ne kare na Shasta. Shin, ba ya da kyau!

4. Kuna yin shi tare da matsayi na CSS, don sanya rubutu a sama da hoton. Na sanya takardata a gefen hagu, amma zaka iya sanya shi dama dama ta hanyar canza hagu biyu: 0; kaddarorin zuwa dama: 0; .

   #image {
   matsayi: dangi;
   nisa: 170px;
   tsawo: 128px;
   gefe: 0;
   }
   #text {
   matsayi: cikakke;
   sama: 0;
   hagu: 0;
   nisa: 60px;
   tsawo: 118px;
   Bayanan: #fff;
   Kusawa: 5px;
   }
   #text {
   tace: alpha (opacity = 70);
   Tace: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   #words {
   matsayi: cikakke;
   sama: 0;
   hagu: 0;
   nisa: 60px;
   tsawo: 118px;
   bayanan: m;
   Kusawa: 5px;
   }

Dubi yadda ya dubi