Lærðu um CSS3 ógagnsæi

Gerðu bakgrunn þinn gagnsæ

Ein af þeim hlutum sem þú getur auðveldlega gert í prenthönnun en ekki á vefnum er yfirborðs texti á mynd eða litaðri bakgrunni og breytt gagnsæi þessarar myndar svo að textinn hverfur í bakgrunninn. En það er eign í CSS3 sem leyfir þér að breyta ógagnsæi frumefna þinna svo að þeir hverfi inn og út: ógagnsæi.

Hvernig á að nota ógagnsæi eignarinnar

Ógildingar eignin tekur gildi um gagnsæi frá 0,0 til 1,0.

0,0 er 100% gagnsæ-nokkuð undir þá þætti mun birtast alveg í gegnum. 1,0 er 100% ógagnsæ-ekkert undir þátturinn mun sýna í gegnum.

Svo að setja þátt í 50% gagnsæ, myndirðu skrifa:

ógagnsæi: 0,5;

Sjá nokkur dæmi um ógagnsæi í aðgerð

Vertu viss um að prófa í eldri vafra

Hvorki IE 6 né 7 styðja CSS3 ógagnsæi eignarinnar. En þú ert ekki úr heppni. Í staðinn styður IE alfa-síu fyrir Microsoft-eina eign. Alpha filters í IE samþykkja gildi frá 0 (alveg gagnsæ) í 100 (alveg ógagnsæ). Svo, til að fá gagnsæi þína í IE, ættir þú að margfalda ógagnsæi með 100 og bæta við alfa síu í stíl þína:

sía: alfa (ógagnsæi = 50);

Sjá alfa síu í aðgerð (aðeins IE)

Og notaðu vafraforskeyti

Þú ættir að nota -moz- og -webkit-forskeyti þannig að eldri útgáfur af Mozilla og Webkit vafra styðja það líka:

-webkit-ógagnsæi: 0,5;
-moz-ógagnsæi: 0,5;
ógagnsæi: 0,5;

Setjið alltaf forskeyti vafrans fyrst og gild CSS3 eign síðast.

Prófaðu forskeyti vafrans í eldri Mozilla og Webkit vafra.

Þú getur gert myndir gagnsæ líka

Stilltu ógagnsæi á myndinni sjálfu og það mun hverfa í bakgrunni. Þetta er mjög gagnlegt fyrir bakgrunnsmynd .

Og ef þú bætir við í akkerismerki getur þú búið til sveimaáhrif bara með því að breyta ógagnsæi myndarinnar.

a: sveima img {
sía: alfa (ógagnsæi = 50)
sía: progid: DXImageTransform.Microsoft.Alpha (ógagnsæi = 50)
-moz-ógagnsæi: 0,5;
-webkit-ógagnsæi: 0,5;
ógagnsæi: 0,5;
}

Áhrif þessa HTML:

Prófaðu ofangreindar stíll og HTML í aðgerð.

Settu texta á myndirnar þínar

Með ógagnsæi er hægt að setja texta yfir mynd og myndin virðist hverfa þar sem þessi texti er.

Þessi tækni er svolítið erfiður, því þú getur ekki einfaldlega hverfa myndina, því það mun hverfa alla myndina. Og þú getur ekki hverfa í textareitinn , því að textinn mun hverfa líka.

1. Fyrst stofnarðu ílát DIV og setur myndina inni:

   
   

2. Fylgdu myndinni með tómum DIV-þetta er það sem þú munt gera gagnsæ.

   
   
   

3. Það síðasta sem þú bætir við í HTML er DIV með textanum þínum í það:

   
   
   
   Þetta er hundurinn minn Shasta. Er hann ekki sætur!

4. Þú stíll það með CSS staðsetningu, til að setja textann fyrir ofan myndina. Ég setti textann mína til vinstri, en þú getur sett það til hægri með því að breyta tveimur til vinstri: 0; Eiginleikar til hægri: 0; .

   #image {
   staða: ættingja;
   breidd: 170px;
   hæð: 128px;
   framlegð: 0;
   }
   #texti {
   staða: alger;
   efst: 0;
   vinstri: 0;
   breidd: 60px;
   hæð: 118px;
   bakgrunnur: #fff;
   padding: 5px;
   }
   #texti {
   sía: alfa (ógagnsæi = 70);
   sía: progid: DXImageTransform.Microsoft.Alpha (ógagnsæi = 70);
   -moz-ógagnsæi: 0,70;
   ógagnsæi: 0,7;
   }
   #orð {
   staða: alger;
   efst: 0;
   vinstri: 0;
   breidd: 60px;
   hæð: 118px;
   Bakgrunnur: gagnsæ;
   padding: 5px;
   }

Sjáðu hvernig það lítur út