Mụta maka CSS3 Opacity

Ime Ka Ochie Gị Gbanwee

Otu n'ime ihe ndị ị nwere ike ịme ngwa ngwa na mpempe akwụkwọ ma ọ bụghị na Weebụ bụ ihe na-ekpuchi ederede na ihe oyiyi ma ọ bụ na-acha agba gburugburu, ma gbanwee nghọta nke oyiyi ahụ ka ederede wee daa. Ma enwere ihe onwunwe na CSS3 nke ga-eme ka ị gbanwee opacity nke ihe ndị dị na gị ka ha wee daa: opacity.

Otu esi eji ohiacity Property

Opacity property na-ewere uru nke oke nghọta site na 0.0 na 1.0.

0.0 bụ 100% transperent-ihe ọ bụla dị n'okpuru ebe ahụ ga-egosi kpamkpam. 1.0 bụ 100% opaque-ihe ọ bụla n'okpuru mmewere ga-egosi.

Ya mere, iji setịpụ ihe na 50%, ị ga-ede:

opacity: 0.5;

Lee ihe omuma atu nke opacity in action

Gbalịa Inwale na Nchọgharị Okenye

Enweghị 6 ma ọ bụ 7 na-akwado CSS3 opacity property. Ma ị gaghị enwe obi ụtọ. Kama nke ahụ, IE na-akwado nchekwa mkpụrụedemede Microsoft naanị. Alpha na-enyo enyo na IE na-anabata ihe dị iche iche site na 0 (n'ụzọ zuru ezu) ruo 100 (kpam kpam). Ya mere, iji nweta nghọta gị n'ime IE, ị kwesịrị ịba ụba opacity gị site na 100 ma gbakwunye ụda nke mkpụrụ gị n'ụdị gị:

nyo: alpha (opacity = 50);

Lee mmepụta mkpụrụ na ntinye (ntụgharị naanị)

Jiri Prefixes Nchọgharị

Ikwesiri iji akara -moz-na -webkit-prefixes ka usoro nke ochie nke Mozilla na ihe nchọgharị weebụ na-akwado ya:

-obodokit-opacity: 0,5;
-moz-opacity: 0.5;
opacity: 0.5;

Tinye ihe mbụ nchọgharị na mbụ, na ihe CSS3 dị mma ikpeazụ.

Nyochaa ihe nchọgharị prefixes na okenye Mozilla na ihe nchọgharị weebụ.

Ị Pụrụ Ime Foto dị iche iche

Tọọ opacity na mbiet ya ma ọ ga-adaba na ndabere. Nke a bara ezigbo uru maka ihe ndabere .

Ma ọ bụrụ na ị gbakwunye na mkpado arịlịka ị nwere ike ịmepụta mmetụta hover naanị site na-agbanwe agbanwe opacity nke onyinyo ahụ.

a: hover img {
nyo: alpha (opacity = 50)
ntinye: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-obodokit-opacity: 0,5;
opacity: 0.5;
}

Na-emetụta nke a HTML:

Nyochaa ụdị n'elu na HTML na arụmọrụ.

Tinye ederede na foto gị

Na opacity, ị nwere ike idowe ederede n'elu ihe oyiyi ma nwee onyinyo ahụ na-apụ n'anya ebe ederede ahụ bụ.

Usoro a bụ ntakịrị aghụghọ, n'ihi na ị pụghị nanị ịjụ onyinyo ahụ, n'ihi na nke ahụ ga-agwụcha onyinyo ahụ dum. Ma ị pụghị ịhapụ igbe ederede , n'ihi na ederede ga-apụkwa ebe ahụ.

  1. Mbụ ị mepụtara akpa DIV ma tinye onyinyo gị n'ime:

  2. Soro onyinyo ahụ na VIV efu - nke a bụ ihe ị ga-eme ntụgharị.


  3. Ihe ikpeazụ ị gbakwunye na HTML gị bụ DIV na ederede gị:



    Nke a bụ nkịta m Shasta. Ọ bụghị onye mara mma!
  4. Ị na-eji ya eme ihe na CSS, ka ịdebe ederede n'elu oyiyi ahụ. M tinyere ederede n'aka ekpe, ma ị nwere ike itinye ya n'aka nri site na-agbanwe agbanwe aka ekpe: 0; Njirimara aka nri: 0; .
    #image {
    ọnọdụ: ikwu;
    obosara: 170px;
    elu: 128px;
    oke: 0;
    }
    #text {
    ọnọdụ: zuru;
    n'elu: 0;
    n'aka ekpe: 0;
    obosara: 60px;
    elu: 118px;
    ndabere: #fff;
    mpe akwa: 5px;
    }
    #text {
    nyo: alpha (opacity = 70);
    ntinye: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
    -moz-opacity: 0.70;
    opacity: 0.7;
    }
    #words {
    ọnọdụ: zuru;
    n'elu: 0;
    n'aka ekpe: 0;
    obosara: 60px;
    elu: 118px;
    ndabere: uzo;
    mpe akwa: 5px;
    }

Lee otú o si ele anya