Transparentna css slika. Stvaranje prozirne pozadine u HTML-u i CSS-u (neprozirnost i RGBA efekti)

CSS transparentnost - cross-browser rješenje - 3.8 od 5 na temelju 6 glasova

U ovu lekciju pogledat ćemo CSS transparentnost, naučiti kako dodati raznih elemenata transparentnost stranice i postizanje potpune kompatibilnosti s više preglednika, tj. ovaj efekt radi jednako u različitim preglednicima.

Kako postaviti prozirnost bilo kojeg elementa

U CSS3, svojstvo opacity odgovorno je za stvaranje transparentnih elemenata, koji se mogu primijeniti na bilo koji element. U ovog posjeda Postoje vrijednosti od 0 do 1, koje određuju stupanj prozirnosti. Gdje je 0 puna transparentnost, (zadana vrijednost za sve elemente), a 1 je puna neprozirnost. Vrijednosti se pišu kao razlomci: 0,1, 0,2, 0,3 itd.

Primjer upotrebe:

Transparentnost među preglednicima

Ne percipiraju i implementiraju svi preglednici gornje svojstvo neprozirnosti na isti način. U nekim slučajevima potrebno je koristiti različito ime svojstva ili filtre.

Sljedeći prikazi podržavaju svojstvo neprozirnosti CSS3 Mozilla preglednici 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Tako dobar preglednik :) Internet Explorer do verzije 9.0 ne podržava svojstvo neprozirnosti i za stvaranje transparentnosti za ovaj preglednik trebate koristiti svojstvo filtra i vrijednost alpha(Opacity=X), u kojoj je X cijeli broj u rasponu od 0 do 100 koji određuje razina transparentnosti. 0 je potpuno proziran, a 100 potpuno neproziran.

O Firefox preglednik prije verzije 3.5 podržava svojstvo -moz-opacity umjesto neprozirnosti.

Preglednici kao što su Safari 1.1 i Konqueror 3.1, izgrađeni na KHTML stroju, koriste svojstvo -khtml-opacity za kontrolu transparentnosti.

Kako možete postaviti transparentnost u CSS-u tako da izgleda isto u svim preglednicima? Da bi stvorili rješenje za transparentnost elemenata u više preglednika, potrebno je navesti ne samo jedno svojstvo neprozirnosti, već i sljedeći skup svojstava:

filtar: alfa (neprozirnost=50); /* Transparentnost za IE */ -moz-opacity: 0.5; /* Podržava Mozillu 3.5 i niže */ -khtml-opacity: 0.5; /* Podržava Konqueror 3.1 i Safari 1.1 */ neprozirnost: 0.5; /* Podržava sve ostale preglednike */

Prozirnost raznih elemenata

Pogledajmo neke primjere postavljanja transparentnosti za pojedine elemente koji se najčešće koriste na stranici.

CSS transparentnost slike.

Pogledajmo nekoliko opcija za stvaranje prozirne slike. U sljedeći primjer Prva slika nema postavljenu prozirnost, druga ima 50% prozirnost, treća 30%.

Proizlaziti:

Transparentnost u CSS-u kada lebdite iznad slike.

Često je potrebno učiniti prozirna slika ili bilo koji drugi element u trenutku kada kursor lebdi iznad njega. To možete učiniti koristeći CSS pseudo-class:hover. Da bismo to učinili, našoj slici potrebno je dodijeliti dvije klase, jednu normalnu - to će biti neaktivno stanje slike i drugu klasu s pseudo-klasom: lebdite, ovdje morate odrediti prozirnost slike u ovom trenutku lebdenja kursora.

Rezultat možete vidjeti u demo snimci.

Transparentnost pozadine pomoću CSS-a.

Ovdje je potrebno zapamtiti da se transparentnost odnosi na sve ugniježđene elemente i oni ne mogu imati veću transparentnost od ugniježđenog elementa.

Kao primjer navest ćemo varijantu s pozadinom stranice izrađenom pomoću slike i blokom s pozadinom izrađenom u boji i prozirnošću od 50%.

Primjer koda:

Ovo je rezultat gore objavljenog koda:

Određuje razinu transparentnosti elementa web stranice. Kada je element djelomično ili potpuno proziran, vidi se pozadinska slika ili drugi elementi ispod prozirnog objekta.

kratka informacija

Oznake

Vrijednosti

Vrijednost je broj iz raspona. Vrijednost 0 odgovara potpunoj prozirnosti elementa, 1, naprotiv, njegovoj neprozirnosti. Razlomački brojevi tip 0.6 postavlja prozirnost. Dopušteno je pisati brojeve bez vodeće nule, poput neprozirnosti: .6.

Pješčanik

Winnie the Pooh uvijek nije bio nesklon malom osvježenju, posebno u jedanaest ujutro, jer je u to vrijeme doručak već odavno završio, a ručak još nije počeo. I, naravno, silno se obradovao kad je vidio da Zec vadi šalice i tanjure.

div (neprozirnost: 1; )

Primjer

Proizlaziti ovaj primjer prikazano na sl. 1.

Riža. 1. Rezultat korištenja neprozirnosti

Objektni model

Objekt.stil.neprozirnost

Bilješka

Firefox do verzije 3.5 podržava svojstvo -moz-opacity.

Internet Explorer do verzije 9.0 koristi filtre za promjenu prozirnosti; za ovaj preglednik trebate napisati filter: alpha(opacity=50), gdje parametar neprozirnosti može imati vrijednost od 0 do 100.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

• Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - skupina odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
• Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
• Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
• Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.

Transparentnost u CSS-u prilično je moderna tehnika U zadnje vrijeme, što uzrokuje poteškoće u implementaciji na više preglednika. Još uvijek ne postoji univerzalna metoda, što bi omogućilo transparentnost za sve preglednike. Međutim, nedavno se situacija značajno popravila.

Ovaj članak detaljno razmatra postojeće pristupe i pruža primjere koda i objašnjenja koja će vam pomoći da postignete isti rezultat u svim preglednicima uz minimalan napor.

Jedna stvar vrijedna spomena 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 starijim verzijama Firefoxa i Safarija morate primijeniti svojstvo na sljedeći način:

#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.

U sljedeći redak Koristi se svojstvo -moz-opacity, koje je radilo na vrlo ranim verzijama motora Mozilla. Firefox ga je prestao podržavati u verziji 0.9.

CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi

Za većinu modernih preglednika dovoljno je koristiti sljedeće svojstvo:

#myElement ( neprozirnost: .7; )

U gornjem primjeru, element je postavljen na 70% neprozirnosti (30% prozirnosti). To jest, 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

Kao prijašnja funkcija CSS3 vam također omogućuje postavljanje poluprozirne boje pomoću funkcije HSLA, čiji su parametri Hue, Saturation, Lightness i Alpha.

#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.

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 postaje vidljiva prozirnost. 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 neugodan obrnuta strana. ja ću to učiniti kratki osvrt da bude jasno na što mislimo govorimo o, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje prozirnog učinka.

PNG kao pozadinu

U grafički urednik Jednobojni proziran uzorak je unaprijed pripremljen i spremljen u formatu PNG-24 (slika 1). Posebnost ovog formata je da podržava 256 razina transparentnosti, odnosno može prikazati prozirne slike.

Riža. 1. Slika za stvaranje pozadine

Zatim dodajemo sliku kao pozadinu kroz svojstvo pozadine, kao što je prikazano u primjeru 1.

Primjer 1: Korištenje prozirnog uzorka

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 3.

Riža. 2. Postavljanje tapeta

Naslijeđeni preglednik Internet Explorer 6 ne radi s translucencijom u PNG-24, ako iz nekog razloga trebate podržati ovaj preglednik, morat ćete koristiti skripte za njega.

Gore navedena metoda ima niz ograničenja. Dakle, kada onemogućite slike u pregledniku, pozadina će potpuno nestati. Osim toga, nije tako jednostavno promijeniti boju pozadine i vrijednost prozirnosti; morat ćete ponovno urediti sliku.

Karirana slika

Ova metoda odnosi se na potpuno stare metode implementacije translucencije, kada preglednici "nisu mogli učiniti ništa" i bilo je potrebno tražiti nestandardna rješenja. Trik je stvoriti sliku na kojoj se izmjenjuju prozirni i neprozirni pikseli (slika 3). Ova pravilna struktura stvara efekt prozirnosti, u biti ga oponaša.

Riža. 3. Uvećani karirani uzorak

Ovako to na kraju izgleda (slika 4).

Riža. 4. Simulirajte prozirnost

Nedostaci ove metode usporedivi su s prethodnom; također se može pojaviti moiré uzorak i tekst će se pokvariti.

Svojstvo neprozirnosti

Svojstvo neprozirnosti CSS 3 određuje vrijednost neprozirnosti i kreće se od 0 do 1, gdje je nula potpuna prozirnost elementa, a jedan je, naprotiv, neproziran. Svojstvo neprozirnosti ima posebnu značajku - prozirnost se odnosi na sve dječji elementi, i ne mogu premašiti vrijednost transparentnosti svog roditelja. Ispada da na prozirnoj pozadini ne može biti neprozirnog teksta (primjer 2).

Primjer 2: Korištenje neprozirnosti

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultat primjera prikazan je na sl. 5.

Riža. 5. Prozirnost teksta i pozadine

U verzijama Internet Explorera do i uključujući 8.0, neprozirnost ne radi, pa koristi svojstvo filtra specifično za preglednik. Naravno, to rezultira nevažećim CSS kodom.

RGBA

Moderni pristup mnogo je jednostavniji i vizualniji od gore navedenih metoda i sastoji se od korištenja RGBA formata za boje i pozadinu. Prva tri slova poznata su mnogima i označavaju crvenu, zelenu, plavu (crvena, zelena, plava), posljednja simbolizira alfa kanal i postavlja prozirnost elementa. Format snimanja je sljedeći.

boja pozadine: rgba(r, g, b, a);

U zagradama se umjesto slova nalazi vrijednost komponente boje; može se vidjeti u bilo kojem grafičkom uređivaču; posljednja vrijednost postavlja prozirnost i podudara se s vrijednošću svojstva neprozirnosti.

Ne podržavaju svi preglednici ovaj format: Internet Explorer od verzije 9, Opera od verzije 10, Firefox od 3, Safari od 3.2. Ali općenito, moderni preglednici ispravno prikazati transparentnost. Za starije verzije IE-a možete zasebno odrediti boju u uobičajenom formatu i, naravno, neće biti prozirnosti. Ili ponovno upotrijebite svojstvo filtera, ali tada ćete se morati pomiriti s činjenicom da će transparentnost također utjecati na tekst (primjer 3). Za održavanje važećeg CSS koda koristio sam uvjetne komentare.

Primjer 3: Korištenje RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat primjera može se vidjeti na sl. 6.

Riža. 6. Prozirna pozadina s neprozirnim tekstom

Usporedite sliku s prethodnom, slova su postala svjetlija i jasnija.

U Internet preglednik Explorer 7 otkrio je grešku pri kombiniranju boje pozadine s različita značenja. Na primjer, ako boju pozadine postavite na crvenu, kao što je prikazano u nastavku, pozadina se uopće neće pojaviti u IE7.

Div (boja pozadine: crvena; /* Nije primjenjivo u IE7 */ boja pozadine: rgba(255, 0, 0, 0.5); )

Ovo se rješava zamjenom svojstva background-color s background.

Div ( background: red; /* I ovo radi */ background: rgba(255, 0, 0, 0.5); ) Međutim, postoji jedno upozorenje. Validator CSS-a žali se na pozadinu ako mu date vrijednost RGBA format. Ali u isto vrijeme ispravno se odnosi na boju pozadine. Općenito, kao i uvijek, morate birati između preglednika i valjanosti.

S pojavom CSS3, rad dizajnera izgleda je na mnoge načine postao jednostavniji i logičniji: nakon svega, sada možete uistinu fleksibilno konfigurirati bilo koji objekt, sve rjeđe pribjegavajući JavaScriptu. Recimo da trebate prilagoditi prozirnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina je specificirana skupom atributa, background-repeat, background-attachment, background-origin, background-clip, background-color), a svaki od njih može se specificirati zasebno ili kombinirati pod atributom background. Pogledajmo svaki od njih detaljnije.

atribut boje pozadine

Čak i IE8 podržava ovu metodu. Više slika kao pozadine koristi se kada gumeni raspored. Glavna stvar je da kada koristite bilo koju sliku, ne zaboravite također navesti CSS boja pozadini, jer korisnici možda jednostavno neće učitati sliku.

atribut položaja pozadine

Ako koristite sliku za postavljanje pozadine bloka, CSS će vam omogućiti da postavite sliku bilo gdje na zaslonu. Prema zadanim postavkama, slika se nalazi s lijeve strane gornji kut. Atribut prihvaća ili verbalne oznake (gore, dolje, lijevo, desno) ili numeričke (postoci, pikseli i druge mjerne jedinice). U ovom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

body (background-position: right center;) - u ovom primjeru pozadina će se nalaziti na desnoj strani stranice, a udaljenosti od dna i vrha do slike su iste.

atribut veličine pozadine

Ponekad je potrebno sa koristeći CSS rastegnuti pozadinu ili smanjiti njezinu veličinu. Da biste to učinili, upotrijebite atribut veličine pozadine, a veličina pozadine može se postaviti u pikselima ili postocima ili u bilo kojoj drugoj mjernoj jedinici.

Postoje neki problemi s ovim atributom: za ispravan prikaz pozadini u ranijim verzijama preglednika potrebno je koristiti prefikse. Sigurno, trenutne verzije u potpunosti podržavaju ovaj atribut i potreba za određenim svojstvima je nestala.

background-attachment atribut

Ovaj atribut specificira ponašanje pozadinska slika prilikom listanja. Dakle, može uzeti 3 vrijednosti (ne uzimajući u obzir nasljeđivanje, što je zajedničko svim atributima predstavljenim u ovom članku):

• fiksni— čini sliku nepomičnom u odnosu na pozadinu;
• svitak— pozadina se pomiče zajedno s drugim elementima;
• lokalni— pozadinska slika se pomiče ako sadržaj ima pomicanje. Pozadina koja se proteže izvan sadržaja je fiksna.

Primjer upotrebe:

tijelo (pozadina-prilog fiksan).

Firefox trenutno ne podržava posljednje svojstvo (lokalno).

atribut podrijetla pozadine

Ovaj atribut je odgovoran za pozicioniranje elementa. Preglednici ranije verzije zahtijevaju upotrebu prefiksa. Sama nekretnina ima tri parametra:

• padding-box postavlja pozadinu u odnosu na rub, uzimajući u obzir debljinu okvira;
• rubni okvir razlikuje se od prethodnog svojstva po tome što granična linija može potpuno ili djelomično preklapati pozadinu;
• kutija sa sadržajem Pozicionira sliku, povezujući je sa sadržajem.

Ako je navedeno više vrijednosti, preglednici mogu reagirati drugačije: Firefox i Opera prihvaćaju samo prvu opciju.

atribut ponavljanja pozadine

U pravilu, ako je pozadina dana slikom, treba je ponoviti vodoravno ili okomito. Za to se koristi atribut ponavljanja u pozadini. Dakle, pozadina bloka čiji CSS sadrži takvo svojstvo može imati jedan od nekoliko parametara:

• nema-ponoviti— slika se pojavljuje na stranici u jednoj verziji;
• ponoviti— pozadina se ponavlja duž x i y osi;
• ponovi-x- samo vodoravno;
• ponoviti- samo okomito;
• prostor— pozadina se ponavlja, ali ako se prostor ne može popuniti, tada se između slika pojavljuju praznine;
• krug— slika se skalira ako nije moguće ispuniti cijelo područje cijelim slikama.

Primjer upotrebe atributa:

tijelo (pozadinsko ponavljanje: ponavljanje bez ponavljanja)- sličan pozadinsko ponavljanje: ponavljanje-y.

U CSS3 je moguće postaviti vrijednosti za više slika ako navedete parametre odvojene zarezima.

atribut pozadinskog isječka

Ovaj atribut definira ponašanje pozadine ispod obruba (na primjer, u slučaju točkastih obruba):

• padding-box— pozadina se prikazuje strogo unutar bloka;
• rubni okvir- slika odgovara okviru;
• kutija sa sadržajem— slika u pozadini pojavljuje se samo unutar sadržaja.

Primjer upotrebe:

tijelo (background-clip: content-box;).

Chrom i Safari zahtijevaju prefiks -webkit-.

Atributi neprozirnosti i filtra

Atribut neprozirnosti omogućuje postavljanje prozirnosti pozadine - svojstvo CSS radit će u svim preglednicima. Vrijednost se može postaviti od 0,0 do uključivo 1,0. Ovime možete postaviti prozirnost CSS pozadina bez cjelobrojne vrijednosti: umjesto 0.3 dovoljno je napisati.3:

.block (pozadinska slika: url(img.png); neprozirnost: .3;).

Za postavljanje prozirnosti pozadine, čiji će CSS raditi čak i za IE ispod verzije 9, koristite atribut filtera:

.block (pozadinska slika: url(img.png); filter: alpha(opacity=30);).

U ovom slučaju vrijednost neprozirnosti postavljena je između 0 i 100. Imajte na umu da se atribut neprozirnosti razlikuje od postavke prozirnosti s koristeći RGBA nasljednost: kada koristite neprozirnost, ne samo pozadina, već i svi elementi unutar bloka postaju prozirni.

Uvijek pratite statistiku korištenja preglednika za CIS i sve ostale zemlje. Najviše veliki problem svi dizajneri izgleda imaju stare verzije IE-a, koje ne dopuštaju punu upotrebu CSS3. Prilikom kodiranja ne zaboravite koristiti posebne usluge, koji provjeravaju podržava li vaš preglednik CSS svojstvo. Ako ne možete instalirati starije verzije preglednika, pronađite servis koji će provjeriti rad stranice različitim preglednicima na liniji.