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

U ovoj lekciji ćemo pogledati transparentnost CSS-a, naučiti kako dati transparentnost različitim elementima stranice i postići potpunu kompatibilnost s više preglednika, tj. ovaj će učinak raditi 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. Ovo svojstvo ima vrijednosti od 0 do 1, koje određuju stupanj prozirnosti. Gdje je 0 puna prozirnost (zadana vrijednost za sve elemente), a 1 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ćem primjeru, prva slika nema postavljenu prozirnost, druga ima prozirnost od 50%, a treća ima 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 se može učiniti s CSS pomoć pseudo-klasa: lebdjeti. 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:

U ovoj lekciji ćemo pogledati takve CSS Svojstva - neprozirnost I RGBA. Vlasništvo Neprozirnost odgovoran je samo za prozirnost elemenata i funkciju RGBA– za boju i prozirnost, ako navedete vrijednost prozirnosti alfa kanala.

CSS transparentnost Neprozirnost

Digitalna vrijednost za neprozirnost postaviti u rasponu od 0,0 do 1,0, gdje je nula potpuna prozirnost, a jedan je, naprotiv, apsolutna neprozirnost. Na primjer, da biste vidjeli 50% prozirnosti, trebate postaviti vrijednost na 0,5. Mora se imati na umu da neprozirnost propagira na sve podređene elemente roditelja. To znači da tekst na prozirna pozadina, također će biti proziran. I to je vrlo značajan nedostatak, tekst se ne ističe tako dobro.

Snimka zaslona jasno pokazuje da je crni tekst postao proziran poput plave pozadine.

Div (
pozadina: url(slike/vašaslika.jpg); /* Pozadinska slika */
širina: 750px;
visina: 100px;
margina: auto;
}
.plava (
pozadina: #027av4; /* Boja poda prozirna pozadina */
neprozirnost: 0,3; /* Vrijednost prozirnosti pozadine */
visina: 70px;
}
h1 (
ispuna: 6px;
obitelj-fontova: Arial Black;
font-weight: bolder;
veličina fonta: 50px;
}

CSS transparentnost u RGBA formatu

Format za snimanje boja RGBA, je više moderna alternativa za imovinu neprozirnost. R (crveno), G (zeleno), B (plavo)- znači: crveno, zeleno, plavo. Zadnje pismo A– znači alfa kanal, koji postavlja transparentnost. RGBA Za razliku od Neprozirnost ne utječe na podređene elemente.

Sada pogledajmo naš primjer pomoću RGBA. Zamijenimo ove retke u stilovima.

Pozadina: ##027av4; /* Boja pozadine */
neprozirnost: 0,3; /* vrijednost prozirnosti pozadine */

do sljedećeg retka

Pozadina: rgba(2, 127, 212, 0,3);

Kao što vidite, vrijednost prozirnosti od 0,3 ista je za obje metode.

Rezultat primjera RGBA:

Druga snimka zaslona izgleda puno bolje od prve.

Igrajući se s prozirnošću pozadine blokova, možete postići zanimljive efekte na svojoj web stranici. Važno je da ovi prozirni blokovi idu na vrh šarenog dizajna, poput fotografije. Samo u ovom slučaju učinak će biti vidljiv. Ova tehnika se dugo koristila u dizajnu, čak i prije pojave bilo koje CSS3, implementiran je isključivo u grafičkim programima.

Ako kupac zahtijeva da izgled izgleda dobro u starijim verzijama preglednika Internet Explorer, zatim dodajte svojstvo filtar i ne zaboravite komentirati kako to ne bi utjecalo na valjanost koda.

Zaključak

Format RGBA svi podržavaju moderni preglednici, uz iznimku Internet Explorer. Također je vrlo važno da RGBA fleksibilan, djeluje samo na određeni određeni element, bez utjecaja na njegovu djecu. Jasno je da je to prikladnije za dizajnera izgleda. Moj izbor je definitivno u korist formata RGBA za dobivanje transparentnost u CSS-u.

Za bolju konsolidaciju gradiva i veću jasnoću predlažem da prođete.

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

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 modernih preglednika 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.

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. Ovo svojstvo ne radi u Internet Exploreru, pa morate koristiti filter 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.

Svojstvo CSS opacity odgovorno je za transparentnost elemenata (slike, tekst, blokovi) u html-u.

Sintaksa neprozirnosti CSS-a

Gdje vrijednost može poprimiti stvarne vrijednosti u rasponu od 0,0 do 1,0. Vrijednost 1,0 znači da nema transparentnosti (zadano).

Primjer br. 1. Transparentna slika u html-u

Prva slika je prikazana bez prozirnosti, druga s prozirnošću 0,5

Translucencija elementa

Neka slika postane prozirna dok lebdite!

DemoDownload izvori

Hvala na pozornosti!

Sljedeći članak
Kako stvoriti div blok sa skrolanjem?