Ithute ka Opacity ea CSS3

Ho Etsa Hore Lintho Tsa Hao li se Ntle

E 'ngoe ea lintho tseo u ka li etsang habonolo ha ho hatisoa empa ha ho Websaete ho koahela molaetsa setšoantšong kapa semelo sa mebala,' me u fetole ho hlaka ha setšoantšo seo e le hore litemana li felle ka morao. Empa ho na le setša se CSS3 se tla u lumella hore u fetole tsela eo lisebelisoa tsa hau li sebetsang ka eona e le hore li ka fela le ho tsoa: opacity.

Tsela ea ho Sebelisa thepa ea ho khoneha

Thepa e tsitsitseng e nka bohlokoa ba ponahalo ho tloha ho 0.0 ho ea ho 1.0.

0.0 ke 100% e hlakileng-ntho leha e le efe e ka tlasa ntlha eo e tla bontša ka ho feletseng. 1.0 ke 100% ntle ho letho-ha ho letho le ka tlaase ho setho se tla bontšoa.

E le hore u behe karolo ea 50% e hlakileng, u ka ngola:

opacity: 0.5;

Sheba mehlala ea liketso tse tsitsitseng

E-ba Bonnete ba ho Lekoa ho Ba-Browsers ba Khale

Kapa IE 6 kapa 7 ha e tšehetse thepa ea optimi ea CSS3. Empa ha u tsoe ka mahlohonolo. Ho e-na le hoo, IE e tšehetsa filenete ea alpha-eapa feela ea Microsoft. Li-filters tsa Alpha ho IE li amohela litekanyetso tsa 0 (tse hlakileng ka ho feletseng) ho 100 (opaque ka ho feletseng). Kahoo, e le hore u fumane ponahalo ea hau e hlakileng ho IE, u lokela ho eketsa bokhoni ba hau ka 100 'me u kenye filenate ea alpha ho mekhoa ea hau:

filthara: alpha (opacity = 50);

Sheba alpha filter ka liketso (IE feela)

Le Sebelisa Prefixes ea Mofetoleli

U lokela ho sebelisa li-prezce -moz-etbkit- hore liphetolelo tsa khale tsa Mozilla le li-browser tsa Webkit li li tšehetse:

-blogger-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

Sebelisa li-prefixes tsa pele kamehla, 'me thepa e nepahetseng ea CSS3 e felile.

Hlahloba prefixes ea sebapali ho li-browser tsa khale tsa Mozilla le tsa Webkit.

U ka Etsa Litšoantšo ka Tsela e Ntle

Beha boemo ba setšoantšo ka boeona 'me bo tla fela ka morao. Sena se molemo haholo bakeng sa litšoantšo tsa morao .

'Me haeba u kenya lebokose la ankora u ka etsa liphello tsa hover feela ka ho fetola tsela e ntle ea setšoantšo.

a: hover img {
filthara: alpha (opacity = 50)
filthara: setjhaba: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-blogger-opacity: 0.5;
opacity: 0.5;
}}

E ama HTML:

Leka mekhoa e ka holimo le HTML ka liketso.

Beha Mongolo Litšoantšong Tsa Hao

Ka opacity, o ka beha mongolo holim'a setšoantšo mme o bonahale eka setšoantšo se fela moo temana eo e leng teng.

Tsela ena e nyenyane haholo, hobane u ke ke oa senya setšoantšo feela, kaha seo se tla senya setšoantšo sohle. 'Me u ke ke ua senya lebokose la lebokose la litaba , hobane taba eo e tla fela ka nako e tšoanang.

  1. Taba ea pele u bōpa sejana sa DIV ebe u beha setšoantšo sa hau ka hare:

  2. Latela setšoantšo ka DIV e se nang letho -e leng seo u tla se etsa se totobetseng.


  3. Ntho ea ho qetela eo u e eketsang ka HTML ea hau ke DIV le temana ea hau ho eona:



    Enoa ke ntja ea ka Shasta. Ha a motle!
  4. U e sebelisa ka ho beha boemo ba CSS, ho beha taba e ka holimo ho setšoantšo. Ke beha temana ea ka ka lehlakoreng le letšehali, empa u ka e beha ka ho le letona ka ho fetola tse peli tse setseng: 0; thepa ka ho le letona: 0; .
    #image {
    boemo: kamano;
    bophara: 170px;
    bolelele: 128px;
    marge: 0;
    }}
    #text {
    boemo: ho feletseng;
    holimo: 0;
    ka ho le letšehali: 0;
    bophara: 60px;
    bophahamo: 118px;
    semelo: #fff;
    ho robala: 5px;
    }}
    #text {
    filthara: alpha (opacity = 70);
    filthara: setjhaba: DXImageTransform.Microsoft.Alpha (opacity = 70);
    -moz-opacity: 0.70;
    opacity: 0.7;
    }}
    #words {
    boemo: ho feletseng;
    holimo: 0;
    ka ho le letšehali: 0;
    bophara: 60px;
    bophahamo: 118px;
    setheo: sephiri;
    ho robala: 5px;
    }}

Bona kamoo e shebahalang kateng