Ikasi CSS3 Opakotasuna buruz

Zure atzeko planoa gardena bihurtzea

Inprimatu diseinuan erraz egin ditzakezun gauza bat baina ez da Webean gainjarriko testua irudi edo koloreko atzeko planoan dago, eta irudi horren gardentasuna alda dadin, testua hondoan desegiten den arte. Baina CSS3-ren propietate bat dago zure elementuen opakutasuna aldatzea ahalbidetuko duela, beraz, desagertuko dira: opakutasuna.

Opakotasunaren Jabetza nola erabili

Opazortasunaren propietateak 0.0tik 1.0 bitarteko gardentasunaren balioa hartzen du.

0.0% 100 gardena da, elementu horren azpitik baizik ez da agertuko. 1.0% 100 opakoa da, elementuaren azpitik ez da ezer erakutsiko.

Beraz, elementua% 50 gardena izan dadin, idatzi egin beharko zenuke:

opakotasuna: 0,5;

Ikusi opakutasunaren adibide batzuk ekintza moduan

Ziurtatu arakatzaile zaharrenetan probatu

IE 6 eta 7 ez dira CSS3 opakotasun propietatea onartzen. Baina ez zara zorte txarra. Horren ordez, IEk Microsoft-soilik propietate alfa iragazkia onartzen du. IEko Alpha iragazkiak 0 (erabat gardenak) 0 (guztiz opakuak) balioak onartzen ditu. Beraz, IEren gardentasuna lortzeko, 100eko opakutasuna biderkatu beharko zenuke eta alfa iragazkia gehitu zure estilora:

iragazkia: alfa (opakutasuna = 50);

Ikusi alfa iragazkia ekintza batean (IE bakarrik)

Eta erabili arakatzailearen aurrizkiak

Aurrezpenak -moz- eta -webkit- erabili behar dituzu Mozilla-ren eta Webkit-eko arakatzaileen bertsio zaharragoek ere onartzen dutela:

-webkit-opacity: 0.5;
-moz-opakutasuna: 0,5;
opakutasuna: 0.5;

Beti jarri arakatzailearen aurrizkiak lehenik eta CSS3 baliozko propietateak iraungo du.

Arakatzaileen aurrizkiak probatu Mozilla eta Webkit arakatzaile zaharretan.

Irudiak Transparent Too ere egin ditzakezu

Ezarri irudiaren gainean dagoen opakutasuna eta atzeko planoan desagertuko da. Hau oso erabilgarria da atzeko planoko irudietan .

Eta ainguratutako etiketa batean gehitu ezkero efektuak sor ditzakezu, irudiaren opakutasuna aldatuz.

a: hover img {
iragazkia: alfa (opakutasuna = 50)
iragazkia: progid: DXImageTransform.Microsoft.Alpha (opakutasuna = 50)
-moz-opakutasuna: 0,5;
-webkit-opacity: 0.5;
opakotasuna: 0,5;
}

HTML hau eragiten du:

Probatu goiko estiloak eta HTML ekintzak.

Jarri testua zure irudietan

Opakutasunarekin, testua irudi baten gainean jar dezakezu eta testua idaztean agertzen den irudia ager daitezen.

Teknika hau apur bat delikatua da, ezin duzu irudia desagertu besterik ez delako, irudi osoa desagertuko baita. Eta ezin duzu testu-laukia desagertu , testua ere desagertu delako.

1. Lehenik eta behin, edukiontzi DIV bat sortzen eta zure irudia jarri:

   
   

2. Jarraitu irudia DIV hutsarekin - hau gardena izango duzu.

   
   
   

3. Zure HTMLan gehitzen duzun azken gauza DIV da zure testuan bertan:

   
   
   
   Hau nire txakur Shasta da. Ez al da cute!

4. Estiloa CSS kokapenarekin estiloa da, testuaren irudia gainetik jarri. Nire testua ezkerrean jarri nuen, baina eskuinean jar dezakezu bi ezkerretara aldatuz: 0; propietateak eskuinera: 0; .

   #image {
   posizioa: erlatiboa;
   zabalera: ditu 170 px;
   altuera: 128px;
   marjina: 0;
   }
   #text {
   posizioa: absolutua;
   Goiko: 0;
   ezkerretik: 0;
   zabalera: 60 px;
   altuera: 118px;
   hondo: #fff;
   padding: 5px;
   }
   #text {
   iragazkia: alfa (opakutasuna = 70);
   iragazkia: progid: DXImageTransform.Microsoft.Alpha (opakutasuna = 70);
   -moz-opakutasuna: 0,70;
   opakotasuna: 0,7;
   }
   #words {
   posizioa: absolutua;
   Goiko: 0;
   ezkerretik: 0;
   zabalera: 60 px;
   altuera: 118px;
   hondo: gardena;
   padding: 5px;
   }

Ikusi nola itxura