Phunzirani za Kusintha kwa CSS3

Kupanga Zochitika Zanu Zosasintha

Chimodzi mwa zinthu zomwe mungathe kuzijambula mosavuta koma osati pa Webusala ndizojambula pa fano kapena chikhalidwe cha mtundu wachikuda, ndikusintha kuwonetsera kwa chithunzichi kuti mawuwo afalike kumbuyo. Koma pali malo mu CSS3 omwe angakuloleni kusintha kusintha kwa zinthu zanu kuti zikhale mkati ndi kunja: opacity.

Mmene Mungagwiritsire Ntchito Malo Osungunula

Chida choyendetsa chimapindulitsa kuchuluka kwa kuwonetseredwa kuchokera ku 0.0 mpaka 1.0.

0.0 ndi 100% poyera-chirichonse pansi pa chigawocho chiwonetseratu kwathunthu. 1.0 ndi 100% palibe chilichonse pansi pa element chosonyeza.

Kotero kuti mupange chiganizo ku 50% poyera, mukhoza kulemba:

opacity: 0.5;

Onani zitsanzo za kuchitapo kanthu

Onetsetsani Kuti Muyesedwe ndi Oyendetsa Akale

Palibe IE 6 kapena 7 yothandizira katundu wa CSS3 opacity. Koma inu simuli kunja kwa mwayi. M'malomwake, IE imathandizira fyuluta ya alpha-yapayekha ya Microsoft. Zilefera za Alpha mu IE zimalandira mfundo kuchokera ku 0 (kwathunthu poyera) mpaka 100 (kwathunthu opaque). Kotero, kuti mukhale owonetseredwa mu IE, muyenera kuwonjezera kuchulukitsa kwanu ndi 100 ndi kuwonjezera fyuluta yafayilo kumayendedwe anu:

fyuluta: alpha (opacity = 50);

Onani kapangidwe ka alpha (Action IE kokha)

Ndipo Gwiritsani Ntchito Zotsatila Zotsatila

Muyenera kugwiritsa ntchito ma-pre-maz-and -webkit-prefixes kotero kuti akale akale a Mozilla ndi Webkit osamalonda amathandizenso:

-bwatch-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

Nthawi zonse khalani osatsegula kalembera, ndipo katundu wa CSS3 wodalirika amatha.

Yesani kumasuliridwa kwa osatsegula kumasamba akuluakulu a Mozilla ndi Webkit.

Mungathe Kujambula Zithunzi Zosavuta

Ikani kusokoneza pa chithunzicho ndipo icho chidzafalikira kumbuyo. Izi ndi zothandiza kwambiri pazithunzi zam'mbuyo .

Ndipo ngati inu muwonjezera pa chikhombo cha nangula mukhoza kupanga zotsatira za hover basi mwa kusintha kusintha kwa fano.

a: hover img {
fyuluta: alpha (opacity = 50)
fyuluta: ndondomeko: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-bwatch-opacity: 0.5;
opacity: 0.5;
}}

Zimakhudza HTML:

Yesani mawonekedwe apamwamba ndi HTML mukugwira ntchito.

Ikani Malemba pa Zithunzi Zanu

Ndi opacity, mukhoza kuyika malemba pamwamba pa chithunzi ndikuwonetsa kuti chithunzichi chikuwoneka kuti chikutha.

Njira iyi ndi yovuta kwambiri, chifukwa simungathe kufotokozera fano, chifukwa izi zidzatha fano lonselo. Ndipo simungathe kufooketsa bokosilo , chifukwa malembawo adzatha pomwepo.

1. Choyamba mumapanga chidebe cha DIV ndikuyika fano lanu mkati:

   
   

2. Tsatirani chithunzicho ndi DIV yopanda kanthu -zimene mudzapange poyera.

   
   
   

3. Chinthu chotsiriza chimene inu mumachiwonjezera mu HTML yanu ndi DIV ndi mawu anu mmenemo:

   
   
   
   Uyu ndi galu wanga Shasta. Sindikongola!

4. Mulijambula ndi kukhazikitsa CSS, kuti muike mau pamwamba pa fano. Ndayika mutu wanga kumanzere, koma mukhoza kuwuyika kumanja mwa kusintha awiri otsala: 0; Zomwe zili kumanja: 0; .

   #image {
   udindo: wachibale;
   m'lifupi: 170px;
   kutalika: 128px;
   malire: 0;
   }}
   #text {
   udindo: mtheradi;
   pamwamba: 0;
   kumanzere: 0;
   m'lifupi: 60px;
   kutalika: 118px;
   maziko: #fff;
   padding: 5px;
   }}
   #text {
   fyuluta: alpha (opacity = 70);
   Fyuluta: ndondomeko: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -mazithunzi: 0,70;
   opacity: 0.7;
   }}
   #words {
   udindo: mtheradi;
   pamwamba: 0;
   kumanzere: 0;
   m'lifupi: 60px;
   kutalika: 118px;
   kumbuyo;
   padding: 5px;
   }}

Onani momwe zikuwonekera