Lisätietoja CSS3: n opasiteetista

Taustat läpinäkyvät

Yksi niistä asioista, joita voit helposti tulostaa, mutta ei Webissä, on kuvion tai värillisen taustan päällekkäinen teksti ja muuta kuvan avoimuutta niin, että teksti haalistuu taustalle. Mutta CSS3: ssa on ominaisuus, jonka avulla voit muuttaa elementtiensi peittävyyttä niin, että ne syttyvät sisään ja ulos: opasiteetti.

Opacity-ominaisuuden käyttäminen

Läpinäkymättömyysominaisuuden arvo on läpinäkyvyyden määrä 0,0: stä 1,0: een.

0.0 on 100% läpinäkyvä - mikä tahansa elementti, joka näkyy täysin läpi. 1,0 on 100% läpinäkymätön - mikään elementin alapuolella ei näy läpi.

Jotta elementti olisi 50% läpinäkyvä, kirjoittaisit:

opasiteetti: 0,5;

Katso joitakin esimerkkejä toiminnasta

Varmista testata vanhemmissa selaimissa

IE 6 tai 7 eivät tue CSS3-opasiteettia. Mutta et ole onnesta. Sen sijaan IE tukee Microsoftin ainoaa alfa-suodattimen ominaisuutta. Alfa-suodattimet IE: ssa hyväksyvät arvot 0 (täysin läpinäkyvä) 100: een (täysin läpinäkyvä). Joten, jotta saat läpinäkyvyyden IE: ssä, sinun pitäisi moninkertaistaa opasiteetti 100: llä ja lisätä alfa-suodattimen tyyliisi:

suodatin: alfa (opasiteetti = 50);

Katso toiminnon alfa-suodatin (vain IE)

Käytä selaimen etuliitteitä

Käytä -moz- ja -webkit-etuliitteitä niin, että vanhemmat Mozilla- ja Webkit-selaimetkin tukevat sitä:

-webkit-opasiteetti: 0,5;
-mobi-opasiteetti: 0,5;
läpinäkymättömyys: 0,5;

Aseta aina selaimen etuliitteet ensin ja voimassa oleva CSS3-ominaisuus kestää.

Testaa selaimen etuliitteet vanhemmissa Mozilla- ja Webkit-selaimissa.

Voit myös tehdä kuvista läpinäkyviä

Aseta peittävyys kuvaan itseensä ja se haalistuu taustalle. Tämä on todella hyödyllinen taustakuville .

Ja jos lisäät ankkurointitunnisteeseen, voit luoda hover-tehosteita vain muuttamalla kuvan läpikuultavuutta.

a: hover img {
suodatin: alfa (opasiteetti = 50)
suodatin: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-mobi-opasiteetti: 0,5;
-webkit-opasiteetti: 0,5;
opasiteetti: 0,5;
}

Vaikuttaa tähän HTML: ään:

Testaa yllä olevat tyylejä ja HTML-toimintoja.

Laita teksti kuvillesi

Kun läpinäkymättömyys on mahdollista, voit sijoittaa tekstin kuvan päälle ja näyttää kuvan heikentävän, missä teksti on.

Tämä tekniikka on hieman hankala, koska et voi vain haalistua kuvaa, sillä se heikentää koko kuvaa. Et voi häivyttää tekstiruutua , koska teksti häipyy myös siellä.

1. Ensin luodaan kontti DIV ja aseta kuva sisälle:

   
   

2. Noudata kuvaa tyhjänä DIV -näppäimellä - se on mitä läpinäkyvä.

   
   
   

3. Viimeinen asia, jonka lisäät HTML: ään, on DIV, jossa on tekstiäsi:

   
   
   
   Tämä on koirani Shasta. Eikö hän ole söpö!

4. Soitat sen CSS-paikannuksella ja sijoitat tekstin kuvan yläpuolelle. Saan tekstini vasemmalle puolelle, mutta voit laittaa sen oikealle muuttamalla kahta jäljellä: 0; ominaisuudet oikealle: 0; .

   #image {
   kanta: suhteellinen;
   leveys: 170 kuvapistettä;
   korkeus: 128px;
   margin: 0;
   }
   #text {
   kanta: absoluuttinen;
   top: 0;
   vasen: 0;
   leveys: 60px;
   korkeus: 118px;
   tausta: #fff;
   padding: 5px;
   }
   #text {
   suodatin: alfa (läpinäkymättömyys = 70);
   suodatin: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opasiteetti: 0,70;
   opasiteetti: 0,7;
   }
   #sanat {
   kanta: absoluuttinen;
   top: 0;
   vasen: 0;
   leveys: 60px;
   korkeus: 118px;
   tausta: läpinäkyvä;
   padding: 5px;
   }

Katso, miltä se näyttää