Pagkat-on mahitungod sa CSS3 Opacity

Paghimo sa Imong mga Kaagi nga Transparent

Usa sa mga butang nga sayon ​​nimo mahimo sa disenyo sa pag-imprinta apan dili sa Web ang nag-overlay nga teksto sa usa ka hulagway o kolor nga background, ug giusab ang transparency sa maong hulagway aron ang teksto molambo sa luyo. Apan adunay usa ka propiedad sa CSS3 nga magtugot kanimo sa pag-usab sa opacity sa imong mga elemento aron nga kini molubad ug mogawas: opacity.

Kon Unsaon Paggamit ang Kabtangan sa Opacity

Ang opacity property nagkuha sa usa ka bili sa kantidad sa transparency gikan sa 0.0 ngadto sa 1.0.

Ang 0.0 0.0 mao ang 100% transparent-bisan unsa nga butang nga ubos sa elemento nga makita sa hingpit pinaagi sa. 1.0 mao ang 100% opaque-walay bisan unsa nga ubos sa elemento ang ipakita pinaagi sa.

Busa aron sa pagpahimutang sa usa ka elemento ngadto sa 50% transparent, ikaw mosulat:

opacity: 0.5;

Tan-awa ang pipila ka mga ehemplo sa opacity nga naglihok

Tino nga Sulayan sa Older Browser

Ni IE 6 ni 7 ang suporta sa CSS3 opacity property. Apan dili ka malipayon. Hinunoa, ang IE nagsuporta sa usa ka Microsoft-only property nga alpha filter. Ang mga filter sa Alpha sa IE modawat sa mga bili gikan sa 0 (hingpit nga transparent) ngadto sa 100 (hingpit nga opaque). Busa, aron makuha ang imong transparency sa IE, kinahanglan imong ipuno ang imong opacity sa 100 ug idugang ang usa ka alpha filter sa imong estilo:

filter: alpha (opacity = 50);

Tan-awa ang filter nga alpha sa aksyon (IE lamang)

Ug Paggamit sa mga Panugtog sa Mga Browser

Kinahanglan nimo gamiton ang -moz- ug -webkit-prefixes aron ang mas karaan nga mga bersiyon sa Mozilla ug Webkit browsers mosuporta usab niini:

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

Kanunay nga ibutang ang unang prefix sa browser, ug ang balido nga CSS3 kabtangan molungtad.

Sulayi ang mga prefix sa browser sa daan nga Mozilla ug Webkit browsers.

Mahimo Ka nga Makahimo og mga Imahen nga Transparent Too

Ibutang ang opacity sa larawan mismo ug kini molubad sa background. Kini mapuslanon kaayo alang sa mga hulagway sa background .

Ug kon ikaw nagdugang sa usa ka anchor tag mahimo ka makahimo og hover effect lang pinaagi sa pag-usab sa opacity sa imahe.

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

Nakaapektar niini nga HTML:

Sulayi ang mga estilo sa ibabaw ug ang lihok sa HTML.

Ibutang ang Teksto sa Imong mga Imahen

Uban sa opacity, mahimo nimong ibutang ang teksto sa ibabaw sa usa ka imahen ug ipakita ang imahe nga mahanaw kung asa kana nga teksto.

Kini nga paagi usa ka gamay nga malisud, tungod kay dili nimo mahimo nga mapalong ang hulagway, ingon nga mawala ang tibuok nga larawan. Ug dili nimo malawos ang kahon sa teksto , tungod kay ang teksto malaglag usab didto.

1. Una maghimo ka og usa ka container DIV ug ibutang ang imong hulagway sa sulod:

   
   

2. Sunda ang larawan nga adunay walay sulod nga DIV-mao kini ang imong himoon nga transparent.

   
   
   

3. Ang katapusan nga butang nga imong idugang sa imong HTML mao ang DIV sa imong teksto niini:

   
   
   
   Kini ang akong iro nga Shasta. Dili ba siya gwapo!

4. Gihunahuna nimo kini sa posisyon sa CSS, aron ibutang ang teksto sa ibabaw sa hulagway. Gipahimutang ko ang akong teksto sa wala, apan mahimo nimo kini ibutang sa tuo pinaagi sa pag-usab sa duha ka wala: 0; mga kabtangan ngadto sa tuo: 0; .

   #image {
   posisyon: paryente;
   lapad: 170px;
   gitas-on: 128px;
   margin: 0;
   }
   #text {
   posisyon: hingpit;
   ibabaw: 0;
   wala: 0;
   lapad: 60px;
   gitas-on: 118px;
   background: #fff;
   padding: 5px;
   }
   #text {
   filter: alpha (opacity = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   #mga pulong {
   posisyon: hingpit;
   ibabaw: 0;
   wala: 0;
   lapad: 60px;
   gitas-on: 118px;
   background: transparent;
   padding: 5px;
   }

Tan-awa kung unsa ang hitsura niini