Dzidza Pamusoro peKushandiswa kweCSS3

Kuita Zvaunofunga Zvisina Kujeka

Chimwe chezvinhu zvaunogona kuita nyore nyore mukudhinda mapikicha asi kwete paWebhu iri kuputira rugwaro pane chifananidzo kana ruvara rwemavara, uye shandura kujekesa kwechifananidzo icho kuitira kuti zvinyorwa zvifambe mberi. Asi pane imwe nzvimbo iri muCSS3 iyo ichakubvumira kuti uchinje kugadzikana kwezvinhu zvako kuitira kuti zvipinde mukati nekunze: opacity.

Mashandisiro Aungashandisa Izvo Zvakagadzirwa Zvimwe

Izvo zvinhu zvinoshandiswa zvinotora huwandu hwehuwandu hwekuona pachena kubva ku 0.0 kusvika ku 1.0.

0.0 ndiyo 100% yakajeka-chero chinhu chiri pasi apa ichocho chicharatidza zvachose kuburikidza. 1.0 is 100% opaque-hapana chinhu pasi pechinhu chicharatidza kuburikidza.

Saka kuti ugadzire chikamu ku 50% zvakajeka, unogona kunyora:

opacity: 0.5;

Ona mimwe mienzaniso yekugadzirisa mukuita

Iva Nechokwadi Kuti Uedze MuVhembere Browsers

Kwete IE 6 kana 7 inotsigira cSS3 opacity property. Asi iwe hausi kunze kwemahombekombe. Pane kudaro, IE inotsigira imwe chete yeMicrosoft property alpha filter. Alpha inoshamba muIE inogamuchira zviyero kubva ku 0 (zvakajeka zvachose) kune 100 (opaque zvachose). Saka, kuti uone kusvinura kwako muIE, unofanira kuwedzera kushanda kwako ne 100 uye kuwedzera an alpha filter kumatauriro ako:

firiji: alpha (opacity = 50);

Onai alpha filter muchiito (IE chete)

Uye Shandisa Browser Prefixes

Iwe unofanidza kushandisa -moz-and -webkit- prefixes kuitira kuti zvizvarwa zvekare zveMozilla neWebkit browsers zvinotsigirewo zvakare:

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

Nguva dzose chengetedza prefixes chekushandura, uye yeCSS3 yakachengetwa pfuma inoguma.

Edzai shanduro prefixes muvakuru veMozilla uye Webkit browsers.

Iwe Unogona Kuita Zvifananidzo Zvakawandisa Kwazvo

Isa kugadzikana pamufananidzo pachako uye uchazoguma kumashure. Izvi zvinonyatsoshanda pamifananidzo yakabva .

Uye kana iwe ukawedzera mutikiti yekunyorera iwe unogona kugadzira hover zvinongoitika chete nekushandura kugadzirwa kwechifananidzo.

a: hover img {
faira: alpha (opacity = 50)
filera: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}

Inobata iyi HTML:

Edzai maitiro apamusoro uye HTML muchiito.

Isa Nyaya Pamifananidzo Yako

Nekunaka, iwe unokwanisa kuisa mavara pamusoro pechifananidzo uye kuti chifananidzo chionekwe kuti chinopera kunze kwenyaya iyo.

Iyi nzira inonyangadza, nokuti iwe haugoni kupera mufananidzo wacho, sezvo izvozvo zvicharamba zvakazara mufananidzo wose. Uye iwe haugone kupera rugwaro rwemashoko , nokuti zvinyorwa zvichapera ipapo zvakare.

1. Kutanga iwe unogadzira mudziyo DIV uye isa mufananidzo wako mukati:

   
   

2. Tevera chifananidzo neDIV isina chinhu-ndizvo zvauchaita pachena.

   
   
   

3. Chinhu chokupedzisira chamunowedzera mu HTML yako ndiDIV pamwe nemashoko ako mairi:

   
   
   
   Uyu imbwa yangu Shasta. Haasi iye akanaka!

4. Iwe unofanidza iyo neCSS positioning, kuisa mutsara kumusoro kwechifananidzo. Ndakaisa zvinyorwa zvangu kurutivi rworuboshwe, asi iwe unogona kuzviisa kurudyi kuburikidza nekushandura maviri akasara: 0; dzimba kurudyi: 0; .

   #image {
   nzvimbo: hama;
   kureba: 170px;
   kureba: 128px;
   marginal: 0;
   }
   #text {
   nzvimbo: mhedziso;
   kumusoro: 0;
   Kuruboshwe: 0;
   kureba: 60px;
   kureba: 118px;
   mamiriro acho ezvinhu: #fff;
   padding: 5px;
   }
   #text {
   firiji: alpha (opacity = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   #words {
   nzvimbo: mhedziso;
   kumusoro: 0;
   Kuruboshwe: 0;
   kureba: 60px;
   kureba: 118px;
   mamiriro acho ezvinhu: pachena;
   padding: 5px;
   }

Ona kuti rinoratidzika sei