Saznajte više o CSS3 opacity

Izrada pozadina transparentna

Jedna od stvari koje možete lako napraviti u dizajnu tiska, ali ne i na webu jest tekst preklapanja na slici ili obojenoj pozadini te promijenite transparentnost te slike kako bi tekst izblijedio u pozadini. No, u CSS3 postoji imovina koja će vam omogućiti da promijenite neprozirnost vaših elemenata kako bi izblijedili i izlazili: neprozirnost.

Kako koristiti neprozirnost

Svojstva neprozirnosti zauzimaju vrijednost količine prozirnosti od 0,0 do 1,0.

0,0 je 100% prozirno - sve ispod tog elementa će se potpuno pokazati. 1,0 je 100% neprozirno - ništa ispod elementa neće se pokazati.

Da biste postavili element na 50% transparentan, pisali biste:

Neprozirnost: 0.5;

Pogledajte neke primjere neprozirnosti u akciji

Budite sigurni da ćete testirati starije preglednike

Ni IE 6 ni 7 ne podržavaju CSS3 neprozirnost. Ali ti nisi iz sreće. Umjesto toga, IE podržava samo alfa filtar za svojstvo tvrtke Microsoft. Alfa filtri u IE prihvaćaju vrijednosti od 0 (potpuno prozirno) do 100 (potpuno neprozirno). Dakle, kako biste dobili transparentnost u IE, umnožite svoju neprozirnost za 100 i dodajte alfa filtar svojim stilovima:

filtar: alfa (neprozirnost = 50);

Pogledajte alfa filtar u akciji (samo IE)

Upotrijebite prefikse preglednika

Trebali biste upotrebljavati prečice -moz- i -webkit-prefiks tako da i ona podržavaju starije verzije preglednika Mozilla i Webkit:

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

Najprije stavite prefikse preglednika, a važeći CSS3 entitet traje.

Testiranje prefiksa preglednika u starijim Mozilla i Webkit preglednicima.

Možete i učiniti slike prozirnim

Postavite neprozirnost na samoj slici i nestat će u pozadini. Ovo je stvarno korisno za pozadinske slike .

A ako dodate oznaku za sidro, možete stvoriti efekt hovera samo promjenom neprozirnosti slike.

a: lebdjeti img {
filtar: alfa (neprozirnost = 50)
filtar: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-neprozirnost: 0.5;
-webkit-opacity: 0.5;
Neprozirnost: 0.5;
}

Utječe na ovaj HTML:

Ispitajte gore navedene stilove i HTML u akciji.

Stavite tekst na svoje slike

S neprozirnošću možete postaviti tekst preko slike i izgledati da se slika izblijedi tamo gdje je taj tekst.

Ova tehnika je malo lukav, jer ne možete jednostavno izblijedjeti sliku, jer će se izblijediti cijela slika. I ne možete izblijediti tekstni okvir , jer će tekst i ondje nestati.

1. Najprije izradite spremnik DIV i postavite sliku u njega:

   
   

2. Slijedite sliku s praznim DIV - to je ono što ćete učiniti transparentnim.

   
   
   

3. Posljednja stvar koju dodate u svoj HTML je DIV s vašim tekstom u njemu:

   
   
   
   Ovo je moj pas Shasta. Nije li slatka!

4. Stilirate ga s CSS pozicioniranjem, da biste stavili tekst iznad slike. Stavio sam tekst na lijevu stranu, ali ga možete postaviti desno promjenom lijeva: 0; svojstva na desno: 0; ,

   #image {
   Položaj: relativna;
   Širina: 170px;
   visina: 128px;
   margin: 0;
   }
   #text {
   Položaj: na;
   vrh: 0;
   lijevo: 0;
   Širina: 60 px;
   visina: 118px;
   Pozadina: #fff;
   padding: 5px;
   }
   #text {
   filtar: alfa (opacity = 70);
   filtar: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-neprozirnost: 0,70;
   Neprozirnost: 0,7;
   }
   #words {
   Položaj: na;
   vrh: 0;
   lijevo: 0;
   Širina: 60 px;
   visina: 118px;
   Pozadina: proziran;
   padding: 5px;
   }

Pogledajte kako izgleda