Matuto Tungkol sa CSS3 Opacity

Paggawa ng iyong mga Background Transparent

Isa sa mga bagay na maaari mong madaling gawin sa disenyo ng pag-print ngunit hindi sa Web ay overlay text sa isang imahe o kulay na background, at baguhin ang transparency ng imahe na iyon upang ang teksto ay lilitaw sa background. Ngunit mayroong isang ari-arian sa CSS3 na magbibigay-daan sa iyo upang baguhin ang opacity ng iyong mga elemento upang mag-fade sila sa loob at labas: opacity.

Paano Gamitin ang Opacity Property

Ang halaga ng opacity ay tumatagal ng isang halaga ng halaga ng transparency mula 0.0 hanggang 1.0.

0.0 ay 100% transparent-anumang bagay sa ibaba ng elementong iyon ay magpapakita nang ganap. 1.0 ay 100% opaque-wala sa ibaba ang elemento ay magpapakita sa pamamagitan ng.

Kaya upang itakda ang isang elemento sa 50% na transparent, nais mong isulat:

opacity: 0.5;

Tingnan ang ilang mga halimbawa ng opacity sa pagkilos

Maging Sure to Test sa Older Browsers

Hindi alinman sa IE 6 o 7 ang sumusuporta sa CSS3 opacity property. Ngunit hindi ka out of luck. Sa halip, sinusuportahan ng IE ang isang alpha filter ng property na lamang ng Microsoft. Ang mga filter ng Alpha sa IE ay tumatanggap ng mga halaga mula sa 0 (ganap na transparent) hanggang sa 100 (ganap na opaque). Kaya, upang makuha ang iyong transparency sa IE, dapat mong i-multiply ang iyong opacity sa pamamagitan ng 100 at magdagdag ng isang alpha filter sa iyong mga estilo:

filter: alpha (opacity = 50);

Tingnan ang alpha filter sa aksyon (IE lamang)

At Gamitin ang Mga Prefix ng Gumagamit

Dapat mong gamitin ang prefix -moz- at -webkit upang ang mas lumang bersyon ng Mozilla at Webkit browser ay sinusuportahan din ito:

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

Laging ilagay ang prefix ng browser muna, at ang wastong CSS3 property ay huli.

Subukan ang mga prefix ng browser sa mas lumang Mozilla at Webkit na mga browser.

Maaari kang Gumawa ng Mga Imahe Masyadong Masyadong

Itakda ang opacity sa imahe mismo at ito ay fade sa background. Ito ay talagang kapaki-pakinabang para sa mga larawan sa background .

At kung idagdag mo sa isang anchor tag maaari kang lumikha ng mga hover effect sa pamamagitan lamang ng pagbabago ng opacity ng 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;
}

Nakakaapekto sa HTML na ito:

Subukan ang mga estilo sa itaas at ang HTML sa aksyon.

Ilagay ang Teksto sa Iyong mga Imahe

Sa opacity, maaari kang maglagay ng teksto sa isang imahe at lumitaw ang imahe upang mag-fade kung saan ang tekstong iyon.

Ang pamamaraan na ito ay isang maliit na nakakalito, dahil hindi ka maaaring mag-fade ang imahe, dahil ito ay mapawi ang buong imahe. At hindi mo maaaring mag-fade ang kahon ng teksto , dahil ang teksto ay lilisan din doon.

1. Una kang lumikha ng lalagyan DIV at ilagay ang iyong imahe sa loob:

   
   

2. Sundin ang larawan na may walang laman na DIV - ito ay kung ano ang iyong gagawing maliwanag.

   
   
   

3. Ang huling bagay na idaragdag mo sa iyong HTML ay ang DIV kasama ang iyong teksto dito:

   
   
   
   Ito ang aking aso Shasta. Hindi ba siya maganda!

4. Iyong estilo ito sa pagpoposisyon ng CSS, upang ilagay ang teksto sa itaas ng imahe. Inilagay ko ang aking teksto sa kaliwang bahagi, ngunit maaari mo itong ilagay sa kanan sa pamamagitan ng pagbabago ng dalawang kaliwa: 0; Mga katangian sa kanan: 0; .

   #image {
   posisyon: kamag-anak;
   lapad: 170px;
   taas: 128px;
   margin: 0;
   }
   #text {
   posisyon: absolute;
   itaas: 0;
   kaliwa: 0;
   lapad: 60px;
   taas: 118px;
   background: #fff;
   padding: 5px;
   }
   #text {
   filter: alpha (opacity = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   #words {
   posisyon: absolute;
   itaas: 0;
   kaliwa: 0;
   lapad: 60px;
   taas: 118px;
   background: transparent;
   padding: 5px;
   }

Tingnan kung paano ito hitsura