Sužinokite apie CSS3 opacity

Jūsų fonai yra skaidrūs

Vienas iš dalykų, kuriuos galite lengvai padaryti spausdinant, bet ne internete, yra teksto perdanga vaizde arba spalvotu fonu ir pakeiskite šio vaizdo skaidrumą, kad tekstas išnyks į foną. Tačiau CSS3 turime savybę, kuri leis jums pakeisti elementų neskaidrumą, kad jie išnyks ir išnyks: neskaidrumas.

Kaip naudotis opacity turtu

Neskaidrumo savybė užima skaidrumo vertę nuo 0,0 iki 1,0.

0.0 yra 100% skaidrus - viskas po šio elemento bus rodoma visiškai. 1.0 yra 100% nepermatomas, po elementu bus rodomas niekas.

Taigi, norėdami nustatyti elementą iki 50% skaidrumo, rašykite:

neskaidrumas: 0,5;

Žr kai kuriuos nepermatomos veiksmo pavyzdžius

Būtinai tikrinkite senesniuose naršyklėse

Nei IE 6, nei 7 nepalaiko CSS3 opumo savybių. Bet jūs nesisekau. Vietoje to "IE" palaiko tik "Microsoft" tik nuosavybės alfa filtrą. "Alpha" filtrai "IE" patvirtina vertes nuo 0 (visiškai skaidrios) iki 100 (visiškai nepermatomos). Taigi, norėdami gauti skaidrumą "IE", turėtumėte dauginti savo neskaidrumą iki 100 ir pridėti alfa filtrą į savo stilių:

filtras: alfa (opacity = 50);

Žr. Veikimo alfa filtrą (tik IE)

Ir naudokite naršyklės prefiksus

Turėtumėte naudoti -moz- ir -webkit-prefiksus, kad taip pat palaikytų senesnes "Mozilla" ir "Webkit" naršyklių versijas:

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

Visada įdėkite naršyklės prefiksus pirmiausia ir galiojantį CSS3 nuosavybę.

Išbandykite naršyklės prefiksus senesnėse "Mozilla" ir "Webkit" naršyklėse.

Jūs galite padaryti pernelyg skaidrius vaizdus

Nustatykite nepermatomumą pačiam vaizdui ir jis išnyks į foną. Tai tikrai naudinga fono vaizdams .

Jei pridėsite inkaro žymą, galite sukurti užuominos efektą , pakeisdami vaizdo nepermatomumą.

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

Įtakoja šį HTML:

Išbandykite aukščiau pateiktus stilius ir HTML veiksmus.

Įdėkite tekstą į savo nuotraukas

Su nepermatomumu galite įdėti tekstą į paveikslėlį ir atrodo, kad vaizdas išnyksta, kur tas tekstas yra.

Ši technika yra šiek tiek sudėtinga, nes jūs negalite tiesiog išblukinti vaizdo, nes tai išnyks visą vaizdą. Ir jūs negalite išblukti teksto laukelio , nes tekstas taip pat išnyks.

1. Pirmiausia sukuriate konteinerį DIV ir patalpinsite savo vaizdą:

   
   

2. Sekite vaizdą tuščiu DIV - tai, ką padarysite skaidriai.

   
   
   

3. Paskutinis dalykas, kurį jūs įtraukiate į HTML, yra DIV su juo esančiu tekstu:

   
   
   
   Tai mano šuo Shasta. Ar jis mielas!

4. Jūs stiliaus su CSS padėtimi, kad tekstas būtų virš paveikslėlio. Aš dedu savo tekstą kairėje pusėje, bet jūs galite jį palikti dešinėje, pakeisdami du kairius: 0; savybės į dešinę: 0; .

   #image {
   pozicija: santykinė;
   plotis: 170px;
   aukštis: 128 px;
   marža: 0;
   }
   #text {
   pozicija: absoliutus;
   viršuje: 0;
   kairėje: 0;
   plotis: 60px;
   aukštis: 118 px;
   fonas: #fff;
   padding: 5px;
   }
   #text {
   filtras: alfa (opacity = 70);
   filtras: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0,70;
   neskaidrumas: 0,7;
   }
   #words {
   pozicija: absoliutus;
   viršuje: 0;
   kairėje: 0;
   plotis: 60px;
   aukštis: 118 px;
   fonas: skaidrus;
   padding: 5px;
   }

Pažiūrėkite, kaip tai atrodo