E aʻo e pili ana i ka CSS3 Opacity

Ke wehewehe i kouʻike

ʻO kahi o nā mea hiki ke maʻalahiʻoe i ka hana paʻiʻanaʻaʻole naʻe ma ka pūnaewele ke uhi i kahi kikokikona ma kahi kiʻi a iʻole kaʻili kala, a hoʻololi i ka māliko o kēlā kiʻi i hāʻule ai ka kikokikona. Akā, aia kahi waiwai ma CSS3 e hiki ai iāʻoe ke hoʻololi i ka opacity o kāu mau'enewa i mea e lele ai a ma waho: opacity.

Pehea e hoʻohana ai i ka waiwai'Opacity

ʻO ka waiwai opacity kahi waiwai o ka nui o ka mākiko mai ka 0.0 a 1.0.

0.0 he 100% maopopo-ʻo kēlā me kēia mea i lalo e hōʻikeʻike i kēlā me kēia. 1.0 ka 100% opaque-ʻaʻohe mea ma lalo o ka pae e hōʻikeʻia.

No laila e hoʻonohonoho i kahi hua i 50% maopopo, e kākauʻoe:

opacity: 0.5;

E nānā i kekahi mau laʻana o ka opacity i ka hana

E hōʻoiaʻiʻo e hōʻoia ma nā Pūnaewele Hiʻoi

ʻAʻoleʻo IE 6 a 7 paha i kākoʻo i ka waiwai o ka waiwai CSS3. Akāʻaʻoleʻoe i nele i ka pōmaikaʻi. Ma kahi o ka mea, IE e kākoʻo i kahi kānana alpha alpha. ʻO Alpha i keiki i ka IE eʻae i nā koina mai ka 0 (ke maopopo loa) i ka 100 (pau loa opaque). No laila, no ka loaʻaʻana o kou māliko i ka IE, ponoʻoe e hoʻonui i kou opacity ma o ka helu 100 a hoʻonui i kahi kāneli alpha i kāu mauʻano:

filter: alpha (opacity = 50);

E nānā i ka pākuhi alpha in action (IE wale nō)

E hoʻohana i nā Prefix Pūnaewele

Ponoʻoe e hoʻohana i nā -moz- a -webkit-prefix i mea e kākoʻo pū ai nāʻano kahiko o Mozilla a me nā polokalamu pūnaewele Pūnaewele:

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

E kau mua i nā prefix pūnaewele, a me ka waiwai CSS3 pono loa.

E ho'āʻo i nā prefix pūnaewele i mua o Mozilla a me nā polokalamu Pūnaewele.

Hiki iāʻoe ke hana i nā kiʻi i ka mana

Hoʻopaʻa i ka opacity ma ke kiʻi pono'ī a nalowale i ka hope. He mea maikaʻi kēia no nā kiʻi kiʻi .

A ināʻoe e hoʻohui i kahi'ōkuhi o ka heleuma, hiki iāʻoe ke hana i nā hopena iʻole e hoʻololi i ka opacity o ke kiʻi.

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

Hana i kēia HTML:

E ho'āʻo i nāʻano i luna a me HTML ma ka hana.

E kau i ke kikokikona ma kāu mau kiʻi

Me ka opacity, hiki iāʻoe ke kau i kahi kikokikona ma luna o kahi kiʻi a eʻikeʻia ka pauʻana o ke kiʻi i kahi o kēlā kikokikona.

He mea liʻiliʻi kēiaʻano, no ka mea,ʻaʻole hiki iāʻoe ke hoʻopau wale i ke kiʻi, no ka mea, e pau auaneʻi ke kiʻi. ʻAʻole hiki iāʻoe ke hoʻokuʻu i ka pahu helu , no ka mea e pau ka'ōlelo i laila.

1. E hana muaʻoe i kahi pahu DIV a kau i kāu kiʻi ma loko:

   
   

2. E hahai i ke kiʻi me ka mea nele DIV-ʻo ia ka mea e hoʻomaopopo aiʻoe.

   
   
   

3. ʻO ka mea hope loa āu i hōʻano ai ma kāu HTML ka DIV me kou kikokikona ma loko:

   
   
   
   ʻO kaʻu'īlio'īlio kēia. ʻAʻole maikaʻiʻo ia!

4. Hoʻolālāʻoe me ka hoʻonohonoho CSS, e kau i ka'ōlelo ma luna aʻe o ka kiʻi. Ua kau wau i kaʻu kikokikona ma kaʻaoʻao hema, akā hiki iāʻoe ke kau ma ka'ākau ma ka hoʻololiʻana i nā hemaʻelua: 0; nā mea waiwai i ka'ākau: 0; .

   #image '
   wahi: pili;
   ke kuhi: 170px;
   ke kiʻekiʻe: 128px;
   ka palena: 0;
   }
   #text {
   wahi: kūʻokoʻa;
   luna: 0;
   waiho hema: 0;
   ke lahilahi: 60px;
   ke kiʻekiʻe: 118px;
   ʻike mua: #fff;
   ka pale: 5px;
   }
   #text {
   filter: alpha (opacity = 70);
   hoʻopili: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   LIKE LIKE LIKE
   wahi: kūʻokoʻa;
   luna: 0;
   waiho hema: 0;
   ke lahilahi: 60px;
   ke kiʻekiʻe: 118px;
   ʻikepili:ʻike;
   ka pale: 5px;
   }

E nānā i konaʻano