Jifunze Kuhusu Operesheni ya CSS3

Kufanya asili yako Uwazi

Moja ya mambo ambayo unaweza kufanya kwa urahisi katika uchapishaji wa kubuni lakini si kwenye Mtandao unaufunika maandishi juu ya picha au rangi ya rangi, na kubadilisha uwazi wa picha hiyo ili maandishi yamefikia nyuma. Lakini kuna mali katika CSS3 ambayo itawawezesha kubadili opacity ya mambo yako ili waweze kuingia na nje: opacity.

Jinsi ya kutumia Mali ya Uchapishaji

Mali ya opacity inachukua thamani ya kiasi cha uwazi kutoka 0.0 hadi 1.0.

0.0 ni 100% ya uwazi-chochote chini ya kipengele hicho kitaonyesha kabisa. 1.0 ni 100% opaque-hakuna chini ya kipengele itaonyesha kupitia.

Ili kuweka kipengele kwa uwazi wa 50%, ungeandika hivi:

opacity: 0.5;

Tazama mifano ya opacity in action

Kuwa na uhakika wa mtihani katika Vivinjari Vya Kale

Wala IE 6 wala 7 huunga mkono mali ya operesheni ya CSS3. Lakini wewe si nje ya bahati. Badala yake, IE inasaidia chujio cha alpha-mali ya Microsoft tu. Filters za Alpha katika IE zinakubali maadili kutoka 0 (wazi kabisa) hadi 100 (opaque kabisa). Kwa hiyo, ili uweze uwazi wako katika IE, unapaswa kuzidisha opacity yako kwa 100 na kuongeza kichujio cha alpha kwenye mitindo yako:

chujio: alpha (opacity = 50);

Angalia kichujio cha alpha katika hatua (IE tu)

Na Tumia Prefixes ya Kivinjari

Unapaswa kutumia prefixes -moz-na -webkit- ili matoleo ya zamani ya vivutio vya Mozilla na Webkit pia visaidie:

-bubu-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

Daima kuweka kwanza prefixes ya kivinjari, na mali ya CSS3 halali.

Thibitisha prefixes ya kivinjari kwenye vivinjari vya zamani vya Mozilla na Webkit.

Unaweza Kufanya Picha Kwa Uwazi

Weka opacity kwenye picha yenyewe na itafungua nyuma. Hii ni muhimu kwa picha za background .

Na ikiwa unaongeza kwenye lebo ya nanga unaweza kuunda madhara ya hover tu kwa kubadili opacity ya picha.

a: hover img {
chujio: alpha (opacity = 50)
chuja: programu: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-bubu-opacity: 0.5;
opacity: 0.5;
}

Huathiri HTML hii:

Jaribu mitindo hapo juu na HTML katika hatua.

Weka Nakala kwenye Picha Zako

Kwa opacity, unaweza kuweka maandiko juu ya picha na kuwa na picha itaonekana kuzima ambapo maandishi hayo ni.

Mbinu hii ni ndogo sana, kwa sababu huwezi tu kufuta picha, kama hiyo itafuta picha nzima. Na huwezi kufuta sanduku la maandishi , kwa sababu maandishi yatakufa pale pia.

1. Kwanza uunda chombo cha DIV na uweke picha yako ndani:

   
   

2. Fuata picha na DIV isiyo na kitu-hii ndiyo utakayofanya uwazi.

   
   
   

3. Kitu cha mwisho unachoongeza kwenye HTML yako ni DIV na maandishi yako ndani yake:

   
   
   
   Huyu ni mbwa wangu Shasta. Je! Sio mzuri!

4. Unaiweka kwa uwekaji wa CSS, ili kuweka maandiko juu ya picha. Niliweka maandishi yangu upande wa kushoto, lakini unaweza kuiweka kwa kulia kwa kubadili kushoto mbili: 0; mali kwa kulia: 0; .

   #image {
   msimamo: jamaa;
   upana: 170px;
   urefu: 128px;
   margin: 0;
   }
   #text {
   msimamo: kabisa;
   juu: 0;
   kushoto: 0;
   upana: 60px;
   urefu: 118px;
   background: #fff;
   padding: 5px;
   }
   #text {
   chujio: alpha (opacity = 70);
   chuja: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   #words {
   msimamo: kabisa;
   juu: 0;
   kushoto: 0;
   upana: 60px;
   urefu: 118px;
   background: uwazi;
   padding: 5px;
   }

Tazama jinsi inaonekana