Transparentnost u CSS-u prilično je moderna 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 za postavljanje 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.

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

Svojstvo CSS opacity odgovorno 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

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

CSS прозрачность - кросс-браузерное решение - 3.8 out of 5 based on 6 votes

В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.

Как задать прозрачность любого элемента

В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.

Пример использования:

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.

Svojstvo neprozirnosti CSS3 podržavaju sljedeći tipovi preglednika: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

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

Od Firefoxa 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 sliku ili bilo koji drugi element prozirnim 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 regularnu - 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.

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:

orem Ipsum jednostavno je lažni tekst tiskarske i slovne industrije. Lorem Ipsum je standardni lažni tekst u industriji još od 1500-ih, kada je nepoznati tiskar uzeo galiju slova i pomešao je da bi napravio knjigu uzoraka slova. Preživio je ne samo pet stoljeća, već i skok u elektroničko slaganje slova , ostajući u biti nepromijenjen 1960-ih izdavanjem listova Letraset koji sadrže odlomke Lorem Ipsuma, au novije vrijeme sa softverom za stolno izdavaštvo kao što je Aldus PageMaker uključujući verzije Lorem Ipsuma.
Davno je utvrđena činjenica da će čitatelju odvratiti pažnju čitljiv sadržaj stranice kada gleda njezin izgled. Smisao korištenja Lorem Ipsuma je da ima više-manje normalnu raspodjelu slova, za razliku od upotrebe "Sadržaj ovdje, sadržaj ovdje", što čini da izgleda kao čitljiv engleski. Mnogi paketi za stolno izdavaštvo i uređivači web stranica sada koriste Lorem Ipsum kao svoj zadani tekst modela, a pretraživanje za "lorem ipsum" otkrit će mnoge web stranice koje su još u povojima. Tijekom godina su se razvijale razne verzije, ponekad slučajno, ponekad namjerno (ubačeni humor i slično).

Dakle, danas ćemo razgovarati o transparentnost u html-u stranice. Vjerojatno ste naišli na transparentne skočne blokove, bilo da se radi o galeriji fotografija ili obrascima za prijavu na nekoj popularnoj web stranici. Postoje mnoge upotrebe transparentnosti u HTML-u. Dakle, kako se pravi i gdje se može koristiti?

Pa, prije svega, shvatimo da naš dokument nema samo jednu ravninu monitora - općenito je trodimenzionalan, to sam spomenuo u članku "Z-indeks". U skladu s tim, čak i potpuno proziran sloj, da je na vrhu hrpe zaslona, ​​blokirao bi pristup drugim elementima. Ovo je jedna od glavnih namjena prozirnih blokova. Iako se obično koristi efekt sjenčanja, potpuno proziran sloj će raditi potpuno isto. Tako, na primjer, radi mnogo popularnih fotogalerija; organiziran je osjenčani sloj u kojem se prikazuju fotografije i kontrole za njih. Ostatak stranice "prekriven" je (polu)prozirnim slojem koji blokira pristup svim ostalim elementima na stranici. one. Nećete moći napustiti stranicu klikom na bilo koju vezu na njoj - sav tekst je prekriven pozadinom. Za povratak na tijelo stranice obično pružaju kontrole za zatvaranje galerije, obrazac za prijavu itd. Kontrolirajte prikazivanje/skrivanje prozirnih blokova pomoću javascripta. Nažalost, nema alternative za to. Bez korištenja, korisnik ili uopće neće vidjeti transparentni blok ili ga neće moći zatvoriti bez napuštanja trenutne stranice. Napominjem da se za to koriste svojstva vidljivosti ili prikaza.

Dakle, kako je transparentnost zapravo organizirana u html-u? Postavljanje transparentnosti elementa općenito nije uključeno u CSS specifikaciju, tako da morate koristiti nekoliko uputa odjednom da biste ga izradili. Neki će preglednici (tj.) raditi s jednom opcijom, drugi s drugom. Tj. koristi ugrađenu funkciju filtera, drugi preglednici koriste svojstvo "opacity", koje je postavljeno u rasponu od 0 (potpuno proziran objekt) do 1 (potpuno neproziran). Na primjer, u slučaju transparentnosti od 30%, trebali biste napisati " neprozirnost:0,30; filtar:alfa(neprozirnost=30);". Svojstva, kao što se može vidjeti iz primjera, slična su - samo u prvom slučaju koristi se broj od 0 do 1, u drugom se koristi zapis postotka. Primjer takvog bloka:

<div stil = "pozicija: apsolutna; gore: 0; lijevo: 0; boja pozadine: rgb (18, 114, 214); širina: 100%; id = "VideoFrame" >

Primjer koristi blok prikaza videozapisa koji se aktivira kada kliknete sličicu videozapisa. Visina bloka nije određena jer može varirati ovisno o veličini zaslona i sadržaju stranice. Stoga se dinamički izračunava prilikom otvaranja videa. Primjer korištenja ove tehnike može se vidjeti na glavnoj stranici web stranice ruscircus.ru na kojoj sam svojedobno radio.

To je, zapravo, sva tajna transparentnosti u html-u. Koristimo z-indeks i neprozirnost za postizanje transparentnog učinka. A za to možete pronaći mnoge primjene - sve je ograničeno samo vašom maštom.

08.02.2013 Odgovorit ću na pitanja postavljena u komentarima, naime o tome kako napraviti neprozirni na prozirnom bloku. Ovdje je sve jednostavno, nisam uzalud u materijalu naveo vezu na materijal o z-indeksu, morate stvoriti još jedan blok, s višim z-indeksom od transparentnog. Sada, za nekoliko minuta, skicirao sam primjer. Blokovi:

<div stil = "pozicija:apsolutna; gore: 0; lijevo: 0; boja pozadine:rgb(18, 114, 214); širina:100%; visina:100%; neprozirnost:0,30; filtar:alfa(neprozirnost=30); vidljivost:skriveno; z-indeks:1;" id = "VideoFrame" > <div id = "VideoFrame2" style = "položaj: apsolutni; vrh: 25%; lijevo: 25%; boja pozadine: bijela; širina: 50%; visina: 50%; neprozirnost:0,99; filtar:alfa(neprozirnost=99); vidljivost:skriveno; z-indeks:2;" onclick = "javascript:HideForm();" > Ovdje pišemo tekst</div>

I javascript funkcije

< script type= "text/javascript" >function ShowForm() (document.getElementById ("VideoFrame" ) .style .visibility = "visible" ; document.getElementById ("VideoFrame2" ) .style .visibility = "visible" ; ) function HideForm() ( document.getElementById (" VideoFrame" ) .style .visibility = "hidden" ; document.getElementById ("VideoFrame2") .style .visibility = "hidden" ; )

Prva funkcija prikazuje prozirni blok (zajedno s neprozirnim tekstualnim blokom) - može se vezati za gumb. link, itd.. Druga funkcija koju imam vezana je za klik mišem na blok s tekstom - skriva transparentni blok.

Nadam se da sam razjasnio kako ovo funkcionira. Pa, ako ne, postavljajte pitanja.