Saznajte o CSS3 Opacity

Izrada vaših pozadina Transparentno

Jedna od stvari koju možete lako učiniti u dizajnu štampe, ali ne i na Webu, je prekrivanje teksta na slici ili obojenoj pozadini i promjenite transparentnost te slike tako da se tekst bledi u pozadini. Ali postoji osobina u CSS3 koja će vam omogućiti da promenite neprozirnost vaših elemenata tako da oni uđu i izlaze: neprozirnost.

Kako koristiti svojstvo prozirnosti

Imovina neprozirnosti dobija vrednost količine transparentnosti od 0.0 do 1.0.

0.0 je 100% transparentno - bilo šta ispod toga će se element potpuno pokazati. 1.0 je 100% neprozirno - ništa ispod elementa neće se pokazati.

Dakle, da postavite element na 50% transparentan, upisali biste:

opacity: 0,5;

Pogledajte neke primere nejasnosti u akciji

Budite sigurni da testirate u starijim pregledačima

Ni IE 6 niti 7 ne podržavaju CSS3 svojstvo prozirnosti. Ali ti nemaš sreće. Umesto toga, IE podržava alfa filter samo za Microsoft. Alpha filteri u IE prihvataju vrednosti od 0 (potpuno transparentno) do 100 (potpuno neprozirno). Dakle, da biste dobili transparentnost u IE-u, trebalo bi da pomnožite svoju neprozirnost za 100 i dodate alfa filter svojim stilovima:

filter: alfa (opacity = 50);

Pogledajte alfa filter u akciji (samo IE)

I Upotrijebite prefikse pretraživača

Trebali bi da koristite prefikse -moz- i -webkit-tako da starije verzije Mozilla i Webkit pretraživača podržavaju i to:

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

Uvek stavite prefikse pretraživača i važeća CSS3 svojina.

Testirajte prefikse pretraživača u starijim pregledačima Mozilla i Webkit.

Možete da napravite slike providne previše

Postavite neprozirnost na samu sliku i blede u pozadinu. Ovo je zaista korisno za pozadinske slike .

A ako dodate u sidrenu oznaku, možete kreirati efekte lebde samo promenom nejasnosti slike.

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

Utiče na ovaj HTML:

Testirajte gore navedene stilove i HTML u akciji.

Stavite tekst na svoje slike

Sa neprozirnošću možete postaviti tekst preko slike i izgledati da će slika izbledeti tamo gde je taj tekst.

Ova tehnika je malo nezaštićena, jer ne možete jednostavno da izbledite sliku, jer će to blijediti čitavu sliku. A ne možete izbledeti tekst box , jer će tekst takođe nestati.

1. Prvo kreirate kontejner DIV i stavite sliku unutar:

   
   

2. Pratite sliku sa praznim DIV-ovo je ono što ćete učiniti transparentnim.

   
   
   

3. Poslednja stvar koju dodate u svoj HTML je DIV sa tekstom u njemu:

   
   
   
   Ovo je moj pas Shasta. Zar nije sladak!

4. Stvorite ga CSS pozicioniranjem, da biste postavili tekst iznad slike. Postavio sam svoj tekst sa leve strane, ali ga možete staviti na desno promenom dva lijeva: 0; svojstva na desno: 0; .

   #image {
   položaj: relativan;
   širina: 170px;
   visina: 128px;
   marža: 0;
   }
   #text {
   pozicija: apsolutno;
   vrh: 0;
   lijevo: 0;
   širina: 60px;
   visina: 118px;
   pozadina: #fff;
   padding: 5px;
   }
   #text {
   filter: alfa (opacity = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0,70;
   opacity: 0,7;
   }
   #words {
   pozicija: apsolutno;
   vrh: 0;
   lijevo: 0;
   širina: 60px;
   visina: 118px;
   pozadina: transparentna;
   padding: 5px;
   }

Pogledajte kako izgleda