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, prozirnost se također primjenjuje i postiže kroz svojstvo neprozirnosti ili RGBA format boje koji je postavljen za pozadinu.
Gradijentni blok
Napravite blok prikazan na sl. 1. Blok sadrži poluprozirni okvir s gradijentom s pozadinom s gradijentom ispod naslova i malim pokazivačem. Pozadina na stranici prikazuje se samo radi jasnoće efekta prozirnosti, možete odrediti bilo koju svoju sliku. Minimalna visina bloka je 100px.
Kako napraviti sloj poluprozirnim?
Da biste promijenili prozirnost elementa, primijenite stil svojstvo neprozirnosti s vrijednošću od 0 do 1, gdje 0 odgovara punoj transparentnosti, a 1, naprotiv, neprozirnosti objekta. U pregledniku Internet Explorer ovo svojstvo ne radi, tako da morate koristiti filter posebno za njega, svojstvo koje nije dio CSS specifikacije. Primjer 1 pokazuje kako postaviti transparentnost slojeva za sve preglednike.
Prozirna pozadina
Vlad Merzhevich
Djelomična transparentnost, kada se koristi ispravno, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne postoji jednobojni uzorak, već slika, u ovom slučaju prozirnost postaje vidljiva. Ovaj učinak se postiže različiti putevi A ako se sjećate svega, uključujući i staromodne metode, onda to koristi PNG sliku kao pozadinu, stvaranje karirane slike i svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodne Druga strana... napraviti ću mali pregled da bude jasno što u pitanju, kao i za one čitatelje koji nisu upoznati s nekonvencionalnim opcijama za stvaranje prozirnog efekta.
Kako postaviti tablicu na poluprozirnu, a neke od ćelija nisu?
Za promjenu prozirnosti elementa u CSS3, osigurano je svojstvo neprozirnosti, njegova vrijednost može varirati od 0 do 1. Nula odgovara punoj transparentnosti elementa, a jedan, naprotiv, neprozirnosti. Moderni preglednici rade sasvim ispravno s ovim svojstvom, s izuzetkom Internet preglednik Explorer, pa za njega morate koristiti posebno svojstvo filtera s alfa vrijednošću (Opacity = X), pri čemu X može varirati od 0 do 100.
/* 06.07.2006 */
CSS transparentnost (css neprozirnost, javascript neprozirnost)
Transparentnost je tema ovog članka. Ako vas zanima kako učiniti transparentnim elemente html stranice pomoću CSS-a ili Javascript-a, te kako postići cross-browser (isti rad u različitim preglednicima), uzimajući u obzir preglednike Firefox, Internet Explorer, Opera, Safari, Konqueror, onda nema na čemu. Osim toga, razmotrite gotovo rješenje postupno mijenjajući transparentnost koristeći javascript.
CSS neprozirnost
CSS simbioza neprozirnosti
Pod simbiozom mislim na ujedinjenje različitih stilova za različitim preglednicima u jednom CSS pravilo za dobivanje željeni učinak, tj. za implementaciju u više preglednika.
Filtar: progid: DXImageTransform.Microsoft.Alpha (prozirnost = 50); / * IE 5,5 + * / -moz-prozirnost: 0,5; / * Mozilla 1.6 i starije * / -khtml-prozirnost: 0,5; / * Konqueror 3.1, Safari 1.1 * // * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /
Zapravo, potrebno je prvo i posljednje pravilo, za IE5.5+ i preglednike koji razumiju CSS3 neprozirnost, a dva pravila u sredini očito ne čine razliku, ali ne smetaju (odlučite sami trebate li ih).
Simbioza neprozirnosti Javascripta
Sada pokušajmo postaviti transparentnost kroz skriptu, uzimajući u obzir osobitosti različitih preglednika opisanih gore.
Funkcija setElementOpacity (sElemId, nOpacity) (var opacityProp = getOpacityProperty (); var elem = document.getElementById (sElemId); if (! Elem ||! OpacityProp) return; // Ako element sa navedenim ID-om ne postoji ili preglednik ne podržava nijednu od poznatih funkcija kontrole transparentnosti if (opacityProp == "filter") // Internet Exploder 5.5+ (nOpacity * = 100; // Ako je prozirnost već postavljena, promijenite je kroz zbirku filtera, u suprotnom dodajte transparentnost kroz style.filter var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (neprozirnost =" + nOpacity + ")"; // Kako ne biste prebrisali druge filtre, koristite "+ =") drugo // Drugi preglednici elem.style = nNeprozirnost; ) funkcija getOpacityProperty () (if (typeof document.body.style.opacity == "string") // Sukladno s CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) vratiti "prozirnost"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 i ranije, Firefox 0.8 vrati "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 vraćaju "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\ d.] +); /)> = 5.5) // Internet Exploder 5.5+ vraća "filter"; vratiti false; // nema transparentnosti }
Funkcija uzima dva argumenta: sElemId - id elementa, nOpacity - broj s pomičnim zarezom od 0,0 do 1,0 koji specificira CSS3 neprozirnost.
Mislim da bi bilo vrijedno razjasniti dio funkcije setElementOpacity koji se odnosi na IE.
Var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (prozirnost =" + nOpacity + ")";
Možda se pitate zašto ne postavite transparentnost dodjeljivanjem (=) elem.style.filter = "..."; ? Zašto koristiti "+ =" za dodavanje svojstva filtra na kraj retka? Odgovor je jednostavan, kako ne bi "prebrisali" druge filtere. Ali u isto vrijeme, ako dodate filter na ovaj način drugi put, on se neće promijeniti ranije postavljene vrijednosti ovog filtra, ali će se jednostavno dodati na kraj retka svojstava, što nije točno. Stoga, ako je filtar već instaliran, morate njime manipulirati kroz zbirku filtara primijenjenih na element: elem.filters (ali imajte na umu, ako filtar još nije dodijeljen elementu, upravljajte njime kroz ovu zbirku nemoguće). Elementima zbirke može se pristupiti ili po nazivu filtra ili po indeksu. Međutim, filtar se može specificirati u dva stila, IE4 kratki stil ili IE5.5 + stil, što se uzima u obzir u kodu.
Glatka promjena prozirnosti elementa
Gotovo rješenje. Korištenje biblioteke opacity.js
Osnovni koraci:
- Povezujemo knjižnicu funkcija;
- Metodom definiramo pravila fadeOpacity.addRule ();
- Pozivanje metode fadeOpacity () za promjenu prozirnosti od početne vrijednosti do krajnje vrijednosti, ili fadeOpacity.back () vratiti se početna vrijednost razina transparentnosti.
Žvakati
Kako spojiti knjižnicu, mislim, može se vidjeti iz gornjeg primjera. Sada je vrijedno pojasniti definiciju pravila. Prije pozivanja metoda za glatku promjenu transparentnosti, morate definirati pravila po kojima će se proces izvršavati: trebate definirati početnu i konačnu transparentnost, a također, ako želite, navesti parametar kašnjenja koji utječe na brzinu prozirnosti proces promjene.
Pravila se definiraju pomoću metode fadeOpacity.addRule
Sintaksa: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Argumenti:
- sRuleName - naziv pravila, postavljen proizvoljno;
- nStartOpacity i nFinishOpacity - početna i završna transparentnost, brojevi u rasponu od 0,0 do 1,0;
- nDelay - odgoda u milisekundama (izborno, zadana vrijednost je 30).
Samo blijeđenje transparentnosti poziva se putem fadeOpacity (sElemId, sRuleName) metoda, gdje je sElemId id elementa, a sRuleName je naziv pravila. Da biste vratili transparentnost početno stanje koristi se metoda fadeOpacity.back (sElemId).
: zadržite pokazivač miša kako biste jednostavno promijenili prozirnost
Također napominjem da je za jednostavnu promjenu transparentnosti (ali ne i postupnu promjenu), pseudo-selektor sasvim ispravan : lebdjeti, što vam omogućuje da definirate stilove za element kada zadržite pokazivač iznad njega.
Imajte na umu da je slika smještena unutar elementa A. Činjenica je da Internet Explorer do verzije 6 razumije: pseudo-selektor, samo primjenjuje se na linkove, a ne na bilo koje elemente, kao što bi trebalo biti u CSS-u (u IE7 situacija je popravljena).
Transparentnost i nazubljeni tekst u IE
S Izdanje za Windows XP je uveo anti-aliasing fontove na ekranu metoda Cleartype a s time i nuspojave u IE-u pri korištenju ove metode anti-aliasinga. U našem slučaju, ako se transparentnost primjenjuje na element s tekstom kada je omogućena metoda ClearType anti-aliasing, tada se tekst prestaje normalno prikazivati (podebljani tekst - podebljano, na primjer, dvojnici, mogu se pojaviti i razni artefakti, na primjer, u obliku redaka, nazubljenog teksta). Da biste popravili situaciju, za IE trebate podesiti boja pozadine, CSS svojstvo boja pozadine, element na koji se primjenjuje transparentnost. Srećom, IE7 je ispravio grešku.
Transparentnost u CSS-u je prilično trendi tehnika U posljednje vrijemešto uzrokuje poteškoće u implementaciji međupreglednika. Još uvijek ne postoji univerzalna metoda to bi omogućilo transparentnost za sve preglednike. Međutim, u posljednje vrijeme situacija se znatno popravila.
Ovaj članak detaljno razmatra postojeće pristupe i nudi primjere koda i objašnjenja koja će vam pomoći da to postignete isti rezultat u svim preglednicima uz minimalan napor.
Još jedna stvar koju vrijedi spomenuti je da iako transparentnost postoji već nekoliko godina, ona nikada nije bila dio CSS standarda. Ovo je nestandardno svojstvo i trebalo bi biti dio CSS3 specifikacije.
Stari pristup
U starom Verzije Firefoxa a Safari mora 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.
V sljedeći redak koristio svojstvo -moz-opacity koje je radilo za vrlo ranim verzijama Mozilla motor. Firefox je prekinuo podršku za njega u verziji 0.9.
CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi
Za većinu modernih preglednika to je dovoljno za korištenje sljedeća nekretnina:
#myElement (prozirnost: .7;)
U gornjem primjeru, element je postavljen na vrijednost neprozirnosti od 70% (30% neprozirnosti). Odnosno, ako postavimo vrijednost na jedan, tada će element biti neproziran i, sukladno 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 nije jako primjetna.
CSS transparentnost za Internet Explorer
Kao i obično, Internet Explorer nije u prijateljskim odnosima s drugim preglednicima. Osim toga, sada imamo tri verzije ovog preglednika u prilično raširenoj upotrebi, od kojih je postavka transparentnosti u svakoj drugačija i ponekad zahtijeva dodatne napore za postizanje pozitivnog rezultata.
#myElement (filter: alfa (prozirnost = 40);)
Ovaj primjer koristi svojstvo filtera, koje radi u verzijama 6-8, ali postoji jedno ograničenje za verzije 6 i 7: svojstvo hasLayout elementa mora imati postavljeno na true. Ovo svojstvo postoji samo u IE-u i 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 pažnju na komentare):
#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (prozirnost = 40); / * radi u IE6, IE7 i IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (prozirnost = 40)"; / * samo IE8 * /)
Prvi red će raditi u svim verzijama koje se trenutno koriste, drugi samo u IE8. Imajte na umu da drugi redak koristi -ms- prefiks, a vrijednost je navedena 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 = "alfa (prozirnost = 40)"; // za IE
Naravno, u ovom slučaju puno je lakše koristiti jQuery, osim toga, radit će u svim preglednicima:
$ ("# myElement"). css ((prozirnost: .4)); // radi u svim preglednicima
Ovo svojstvo možete animirati:
$("# myElement").animate ((prozirnost: .4), 1000, funkcija () (// Animacija dovršena; ovaj kod radi u svim preglednicima.));
RGBA funkcija
Planira se podržati alfa kanal u CSS3 pomoću rgba funkcije. 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 prethodna funkcija CSS3 vam također omogućuje postavljanje poluprozirne boje pomoću HSLA funkcije, č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 je da se postavka neprozirnosti ne primjenjuje na podređene elemente, dok je svojstvo neprozirnosti naslijeđeno.
Kako postaviti prozirnu boju u css? Trenutno postoje 3 načina za to.
Metoda 1 - transparentna vrijednost
Ako vrijednost teksta ili boje pozadine postavite na transparentnu, tada će boja biti potpuno prozirna, odnosno nevidljiva. Primjer:
Boja: prozirna;
Takav tekst neće biti vidljiv na stranici.
Metoda 2 - rgba način boje
A ovo je već css3 inovacija. Prije nije postojao takav način u web razvoju, postojao je samo rgb. Vjerojatno znate kako napisati boju u ovom formatu. Da biste to učinili, u zagradama morate navesti tri vrijednosti od 0 do 255, što ukazuje na zasićenost jedne od tri osnovne boje (crvena, zelena, plava). Na primjer:
Pozadina: rgb (230, 121, 156);
Format rgba se ne razlikuje, dodaje se samo četvrta vrijednost - stupanj transparentnosti elementa od 0 do 1. Općenito, ovaj format zapisa uglavnom se koristi za određivanje poluprozirne boje, a ne potpuno prozirne. Da biste postigli potpunu transparentnost, trebate samo napisati 0 kao četvrtu vrijednost.
Pozadina: rgba (0, 0, 0, 0);
U ovom slučaju, preostale 3 znamenke ne igraju posebnu ulogu.
Poluprozirna boja može se postaviti ako je četvrti parametar postavljen na vrijednost od 0,01 do 0,99. Već sam malo napisao o postavljanju prozirnosti pozadine, možete pročitati ako vas zanima.
Metoda 3 - neprozirnost
Još jedno svojstvo iz css3 tehnologije. Ali odmah vas želim upozoriti da radi malo drugačije. Neprozirnost se koristi za postavljanje neprozirnosti na cijeli blok na koji se primjenjuje. Tako se čitljivost teksta i percepcija slika pogoršavaju. Dakle, vidim smisao primjene svojstva samo za blokove u kojima nema teksta ili bilo koje druge informacije. Vrijednosti se mogu postaviti od 0 do 1, kao što je slučaj s četvrtim parametrom pri određivanju boje u rgba formatu.
Općenito, na ovaj trenutak ovo su svi načini koje znam za postavljanje transparentne boje u css-u. Zašto je to potrebno drugo je pitanje. Ono što je ispod može se vidjeti kroz prozirnu pozadinu. Ponekad se to mora učiniti dizajnom. Općenito, tehnika s translucencijom danas je vrlo česta.
Prozirna pozadina
Kao što vjerojatno znate, pozadina je css svojstvo koje vam omogućuje da postavite boju pozadine ili učitate sliku koja će djelovati kao pozadina.
Postavite transparentnost za css pozadinu
Dakle, sve je to vrlo jednostavno zahvaljujući rgba formatu za označavanje boja. Ako radite sa grafički urednici onda to vjerojatno znaš način rada u boji rgb označava crvenu, zelenu i plavu. Dakle, rgba je praktički isti, samo se dodaje još jedan parametar - transparentnost. Napisano je ovako:
Boja pozadine: rgba (173, 57, 22, 0,5)
Prvo, izričito označavamo da boju postavljamo u rgba modu. Zatim specificiramo vrijednosti zasićenja tri primarne boje od 0 do 255, gdje je 255 najveća zasićenost. Četvrti parametar je naša transparentnost. Ovdje je upisana vrijednost od 0 do jedan. 1 je potpuno neproziran, a 0 potpuno proziran. Sukladno tome, ako ga postavite na 0, boja pozadine uopće neće biti vidljiva.
Sada znate kako postaviti transparentnost za svojstvo pozadine u css-u. Da biste to učinili, morate koristiti rgba način boje. Postoji i svojstvo neprozirnosti, ali ono se odnosi na cijeli element u cjelini. To jest, kada se primjenjuje neprozirnost, transparentnost se također može primijeniti na tekst, čineći ga nečitljivim.
Na primjer, prozirna pozadina
Prednosti prozirne pozadine lako je pokazati na primjeru. Na primjer, imamo opća pozadina stranicama. Ovako bi blok izgledao da mu je data puna crna boja:
Sada postavimo istu crnu boju na blok, ali je označimo pomoću rgba formata boje, navodeći posljednju vrijednost u 0.7, na primjer. Ispada ovako: 
Sada je pozadina bloka vidljiva i vidljiva kroz nju pozadinska slika... Ova slika i pozadina služe samo u svrhu ilustracije. Kao što možete zamisliti, transparentnost u css pozadini može biti korisna kada vam je potrebna pozadina ugniježđenog elementa da se vidi bez zaklanjanja drugih pozadina koje se nalaze u drugim slojevima.
Postavite samu boju sa koristeći rgba nije teško. Kao što je već spomenuto - prva tri slova znače tri osnovne boje: crvenu, zelenu i plavu, odnosno njihov udio (od 0 do 255). Propisivanje različita značenja možete dobiti milijune različite boje, a prozirnost će vam omogućiti da smislite puno više prekrasni efekti za stranicu, ako je potrebno.
Vlasništvo CSS neprozirnost odgovoran za transparentnost elemenata (slike, tekst, blokovi) u html-u.
CSS sintaksa neprozirnosti
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 #1. Prozirna slika u html-u
Prva slika se prikazuje bez prozirnosti, druga s prozirnošću od 0,5
Translucencija elementa
Učinite sliku poluprozirnom pri lebdenju!
DemoDownload izvorHvala na pažnji!
Sljedeći članak
Kako stvoriti div blok s pomicanjem?
