Postoje tri načina za promjenu prozirnosti elementa u CSS-u:
koristeći svojstvo neprozirnosti,
pomoću funkcije rgba(),
pomoću funkcije hsla().
1. Svojstvo neprozirnosti
Svojstvo neprozirnosti omogućuje vam da bilo koji element web stranice učinite djelomično ili potpuno prozirnim. Ovo svojstvo mijenja prozirnost elemenata za koje pozadinska slika(slika) ili je pozadina postavljena pomoću boje ili gradijenta. Ako element koji ima primijenjeno svojstvo neprozirnosti sadrži druge elemente unutar sebe, oni će također promijeniti svoju prozirnost.
Svojstvo neprozirnosti prihvaća vrijednosti u rasponu od 0 (potpuno prozirno) do 1 (neprozirno), na primjer:
H1 (boja: #CD6829;) div (pozadina: #CDD6DB; neprozirnost: .3; ) 
Riža. 1. Prozirnost elemenata pomoću neprozirnosti
2. funkcija rgba().
RGBA model boja stvara ton boje miješanjem u traženim omjerima Crvena, zelena I plava cvijeće, i alfa kanal (Alpha) odgovoran je za stupanj prozirnosti boje. Za razliku od svojstva neprozirnosti, za blok koji sadrži druge elemente, funkcija rgba() promijenit će neprozirnost samo bloka.
Riža. 2. RGB model boja h1 (boja: #CD6829;) div (pozadina: rgba(205, 214, 219, 0.3);) 
Riža. 3. Transparentnost elemenata pomoću funkcije rgba(). 3. Funkcija hsla()
Funkcija hsla() čiji parametri znače ton (nijansa), zasićenost, svjetlina I alfa kanal (Alpha), također vam omogućuje postavljanje prozirne boje.
Nijanse boja navedene su u postocima pomoću odgovarajuće vrijednosti iz kotača boja. Sam krug je podijeljen na sektore, na granicama kojih se nalaze primarne boje:
0/360° - crvena
60° - žuta
120° - zelena boja
180° - plava boja
240° - plava boja
270° - ljubičasta boja
300° - ljubičasta boja.
Da biste dobili crnu boju, trebate postaviti vrijednosti nijanse, zasićenosti i svjetline na nulu - hsla(0, 0%, 0%, 1) . Bijela boja se dobiva pri 100% vrijednosti svjetline hsla(0, 0%, 100%, 1) i siva boja— pri nultoj vrijednosti zasićenja hsla(0, 0%, 50%, 1) .
Za stvaranje transparentnog efekta u CSS-u koristi se svojstvo neprozirnosti.
IE8 i starije verzije podržavaju alternativno svojstvo - filter:alpha(opacity=x) , gdje " x " može biti vrijednost od 0 do 100 od manje vrijednosti, to će element biti transparentniji.
Svi ostali preglednici podržavaju standardnu neprozirnost CSS svojstva, koja kao vrijednost može uzeti broj od 0,0 do 1,0, što je niža vrijednost, to će element biti transparentniji:
Pokušajte »
Transparentnost pri lebdenju
Pseudo-class:hover vam omogućuje promjenu izgled elemenata kada kursorom miša prijeđete preko njih. Koristit ćemo ovu značajku kako bi slika izgubila prozirnost kada prijeđemo pokazivačem iznad:
Pokušajte »
Prozirnost pozadine
Postoje dva moguće načine učinite element transparentnim: gore opisano svojstvo neprozirnosti i određivanje boje pozadine u RGBA formatu.
Možda ste već upoznati s RGB modelom predstavljanja boja. RGB (Red, Green, Blue - crvena, zelena, plava) sustav je boja koji određuje nijansu miješanjem crvene, zelene i plave. Na primjer, da biste postavili boju teksta na žutu, možete koristiti bilo koju od sljedećih deklaracija:
Boja: rgb(255,255,0); boja: rgb(100%,100%,0);
Boje određene korištenjem RGB-a razlikovat će se od heksadecimalnih vrijednosti koje smo prethodno koristili po tome što dopuštaju upotrebu alfa kanala prozirnosti. To znači da će kroz pozadinu elementa s alfa prozirnošću biti vidljivo ono što se nalazi ispod njega.
Obavijest RGBA boje po sintaksi slična standardnim RGB pravilima. Međutim, također ćemo morati deklarirati vrijednost kao RGBA (umjesto RGB) i navesti dodatnu decimalnu vrijednost prozirnosti nakon vrijednosti boje između 0,0 (potpuno prozirno) i 1 (potpuno neprozirno).
Boja: rgba(255,255,0,0.5); boja: rgba(100%,100%,0,0.5);
Razlika između svojstva neprozirnosti i svojstva RGBA je u tome što svojstvo neprozirnosti primjenjuje prozirnost na cijeli element, što znači da cijeli sadržaj elementa postaje proziran. A RGBA vam omogućuje postavljanje prozirnosti pojedinačnih dijelova elementa (na primjer, samo teksta ili pozadine):
Tijelo (pozadinska slika: url(img.jpg); ) .prim1 ( širina: 400px; margina: 30px 50px; boja pozadine: #ffffff; obrub: 1px puna crna; težina fonta: podebljano; neprozirnost: 0,5; filter : alpha(opacity=70); /*za IE8 i ranije*/ text-align: center; ) .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid crno; težina fonta: podebljano; poravnanje teksta: središte; ) Pokušajte »
Napomena: RGBA vrijednosti nisu podržane u IE8 i ranijim verzijama. Da biste deklarirali zamjensku boju za starije preglednike koji ne podržavaju alfa vrijednosti boja, trebali biste je prvo navesti prije RGBA vrijednosti: pozadina: rgb(255,255,0); pozadina: rgba(255,255,0,0.5);
Vlad Merzhevich
Učinak prozirnosti elementa jasno je vidljiv na pozadinskoj slici i postao je raširen u različitim operativni sustavi jer izgleda elegantno i lijepo. U web dizajnu također se koristi translucencija i postiže se svojstvom neprozirnosti ili RGBA formatom boje koji je postavljen za pozadinu.
Gradijent blok
Napravite blok prikazan na sl. 1. Blok sadrži proziran gradijentni okvir s gradijentnom pozadinom ispod naslova i malim pokazivačem. Pozadina na stranici je samo radi jasnoće efekta prozirnosti; možete označiti bilo koju svoju sliku. Minimalna visina bloka je 100px.
Kako sloj učiniti poluprozirnim?
Da biste promijenili stupanj prozirnosti elementa, upotrijebite svojstvo stila neprozirnosti s vrijednošću od 0 do 1, gdje 0 odgovara potpunoj prozirnosti, a 1, naprotiv, neprozirnosti objekta. U pregledniku Internet Explorer Ovo svojstvo ne radi, pa morate koristiti filtar posebno za njega, svojstvo koje nije dio CSS specifikacije. Primjer 1 pokazuje kako postaviti transparentnost sloja za sve preglednike.
Prozirna pozadina
Vlad Merzhevich
Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da se ispod prozirnih blokova ne nalazi monokromatski dizajn, već slika; u ovom slučaju transparentnost postaje vidljiva. Ovaj učinak se postiže različiti putevi i ako se sjećate svega, uključujući staromodne metode, koristi se PNG slika kao pozadina, stvara kockastu sliku i svojstvo neprozirnosti. Ali čim se pojavi potreba da se napravi prozirna pozadina u bloku, ove metode imaju neugodnu lošu stranu. Napravit ću kratku recenziju kako bi bilo jasno o čemu govorimo, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje prozirnog efekta.
Kako postaviti tablicu da bude prozirna, a neke ćelije nisu?
Za promjenu prozirnosti elementa, CSS3 daje svojstvo neprozirnosti, čija vrijednost može varirati od 0 do 1. Nula odgovara potpunoj prozirnosti elementa, a jedan, naprotiv, neprozirnosti. Moderni preglednici rade prilično ispravno s ovim svojstvom s izuzetkom Internet preglednik Explorer, tako da morate koristiti posebno svojstvo filtera za njega s vrijednošću alpha(Opacity=X) , gdje X može varirati od 0 do 100.
Vlasništvo CSS neprozirnost odgovoran je za transparentnost elemenata (slike, tekst, blokovi) u html-u.
Sintaksa neprozirnosti CSS-a
neprozirnost: vrijednost;
Gdje vrijednost može poprimiti stvarne vrijednosti u rasponu od 0,0 do 1,0. Vrijednost 1,0 znači da nema transparentnosti (zadano).
Primjeri: poput transparentnosti u html-u
Primjer br. 1. Transparentna slika u html-u
Prva slika je prikazana bez prozirnosti, druga s prozirnošću 0,5
Primjer br. 2. Efekti s transparentnošću u html-u
Prema zadanim postavkama blok je djelomično proziran. Kada prijeđete mišem preko bloka, svijetli. Takvi se efekti često koriste u dizajnu web stranica.
Stranica se pretvara u sljedeće
Primjer br. 3. Transparentni blok na slici u html-u
Ispod je primjer poluprozirnog bloka koji je djelomično zaklonio sliku. Blok namjerno ne prekriva sliku u potpunosti kako bi se pokazalo kako izgleda na praznoj pozadini.
Stranica se pretvara u sljedeće
Transparentnost u CSS-u prilično je trendi tehnika u posljednje vrijeme, što uzrokuje poteškoće u implementaciji na više preglednika. Još uvijek ne postoji univerzalna metoda koja bi omogućila implementaciju transparentnosti za sve preglednike. Međutim, nedavno se situacija značajno popravila.
Ovaj članak pruža detaljan pregled postojećih pristupa, kao i primjere koda i objašnjenja koji će vam pomoći da postignete isti rezultat u svim preglednicima uz minimalan napor.
Jedna stvar koju vrijedi spomenuti je da iako transparentnost postoji već nekoliko godina, nikada nije bila dio CSS standarda. Ovo je nestandardno svojstvo koje bi trebalo biti dio CSS3 specifikacije.
Stari pristup
U starom Verzije Firefoxa a Safari mora primijeniti svojstvo ovako:
#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )
Svojstvo -khtml-opacity korišteno je u starijim verzijama webkit preglednika. Ovo svojstvo je zastarjelo i više nije potrebno osim ako niste sigurni da značajan dio prometa vaše stranice dolazi od posjetitelja koji koriste Safari 1.x, što je naravno malo vjerojatno.
Sljedeći redak koristi svojstvo -moz-opacity, koje je radilo na vrlo ranim verzijama Mozilla motora. Firefox ga je prestao podržavati u verziji 0.9.
CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi
Za većinu moderni preglednici dovoljno je koristiti sljedeće svojstvo:
#myElement ( neprozirnost: .7; )
U gornjem primjeru, element je postavljen na 70% neprozirnosti (30% prozirnosti). Odnosno, ako vrijednost postavimo na jedan, element će biti neproziran i, prema tome, postavljanje ove vrijednosti na nulu učinit će ga nevidljivim.
Svojstvo neprozirnosti obrađuje 2 decimalne znamenke. Odnosno, vrijednost ".01" će se razlikovati od vrijednosti ".02", iako to nije vidljivo.
CSS transparentnost za Internet Explorer
Kao i obično, Internet Explorer nije prijateljski raspoložen prema drugim preglednicima. Osim toga, sada imamo tri verzije ovog preglednika u prilično širokoj upotrebi, od kojih je postavka transparentnosti u svakoj drugačija i ponekad zahtijeva dodatne napore da se dobije pozitivan rezultat.
#myElement (filtar: alpha(opacity=40); )
Ovaj primjer koristi svojstvo filtera, koje radi u verzijama 6-8, ali za verzije 6 i 7 postoji jedno ograničenje: svojstvo elementa hasLayout mora biti postavljeno na true. Ovo svojstvo postoji samo u IE, a više o njemu možete pročitati, na primjer, na Habréu.
Drugi način postavljanja transparentnosti pomoću CSS-a u IE8 je korištenje sljedećeg pristupa (obratite pozornost na komentare):
#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* radi u IE6, IE7 i IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * samo za IE8 */ )
Prvi redak će raditi u svim trenutno korištenim verzijama, drugi - samo u IE8. Imajte na umu da drugi redak koristi prefiks -ms-, a vrijednost je u navodnicima.
Postavljanje i promjena CSS transparentnosti pomoću JavaScripta ili jQueryja
Za postavljanje transparentnosti možete koristiti sljedeći kod:
Document.getElementById("myElement").style.opacity = ".4"; // za većinu preglednika document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // za IE
Naravno, u ovom slučaju puno je lakše koristiti jQuery, osim toga, radit će u svim preglednicima:
$("#myElement").css(( neprozirnost: .4 )); // radi u svim preglednicima
Možete animirati ovo svojstvo:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animacija je dovršena; ovaj kod radi u svim preglednicima. ));
RGBA funkcija
CSS3 planira podržati alfa kanale pomoću funkcije rgba. Ova značajka radi u Firefoxu 3+, Operi 10.1+, Chromeu 2+, Safariju 3.1+. Koristi se ovako:
#rgba ( pozadina: rgba(98, 135, 167, .4); )
U ovom slučaju posljednji parametar označava razinu neprozirnosti.
HSLA funkcija
Slično prethodnoj funkciji, CSS3 također omogućuje postavljanje poluprozirne boje pomoću funkcije HSLA, čiji su parametri Hue, Saturation, Lightness i Alpha channel.
#hsla ( pozadina: hsla(207, 38%, 47%, .4); )
Važna točka pri korištenju funkcija rgba i hsla jest da se postavka transparentnosti ne primjenjuje na podređene elemente, dok se upotreba svojstva neprozirnosti nasljeđuje.