Vlad Merzhevich
Efekat prozračnosti elementa jasno je vidljiv na pozadinskoj slici i postao je široko rasprostranjen u raznim operativni sistemi jer izgleda elegantno i lijepo. U web dizajnu, prozirnost se također koristi 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 prozirnu granicu gradijenta sa pozadinom gradijenta ispod naslova i mali pokazivač. Pozadina na stranici je data samo radi jasnoće efekta translucencije, možete odrediti bilo koju svoju sliku. Minimalna visina bloka je 100px.
Kako napraviti sloj providnim?
Da biste promijenili stepen transparentnosti elementa, primjenjuje se stil. svojstva neprozirnosti sa vrijednošću od 0 do 1, gdje 0 odgovara punoj transparentnosti, a 1, naprotiv, neprozirnosti objekta. U pretraživaču Internet Explorer ovo svojstvo ne radi, tako da morate koristiti filter posebno za njega, svojstvo izvan CSS specifikacije. Primjer 1 pokazuje kako postaviti transparentnost sloja za sve pretraživače.
prozirna pozadina
Vlad Merzhevich
Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne bi trebao biti jednobojni uzorak, već slika, u ovom slučaju prozirnost postaje vidljiva. Ovaj efekat se postiže Različiti putevi i ako se sjećate svega, uključujući i staromodne metode, onda je ovo korištenje PNG slike kao pozadine, kreiranje karirane slike i svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodnost Druga strana. ja ću uraditi mala recenzija da bude jasno šta u pitanju, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje prozirnog efekta.
Kako podesiti sto da bude proziran, a neke ćelije ne?
Za promjenu prozirnosti elementa u CSS3 obezbjeđuje se svojstvo neprozirnosti, njegova vrijednost može varirati od 0 do 1. Nula odgovara punoj transparentnosti elementa, a jedan, naprotiv, neprozirnosti. Moderni pretraživači rade sasvim korektno sa ovim svojstvom, sa izuzetkom Internet pretraživač Explorer, tako da morate koristiti posebno svojstvo filtera za njega sa vrijednošću alpha(Opacity=X) , gdje X može varirati od 0 do 100.
/* 06.07.2006 */
CSS transparentnost (css neprozirnost, javascript neprozirnost)
Efekat transparentnosti je tema ovog članka. Ako vas zanima kako učiniti transparentnim elemente html stranice pomoću CSS-a ili Javascript-a i kako postići cross-browser (isti rad u različitim pretraživačima) uzimajući u obzir pretraživače Firefox, Internet Explorer, Opera, Safari, Konqueror, onda ste dobrodošli. Uz to, razmotrite rješenje po sistemu ključ u ruke postepena promjena transparentnosti sa javascriptom.
CSS neprozirnost (CSS transparentnost)
CSS simbioza neprozirnosti
Pod simbiozom mislim na zajednicu različitim stilovima za različitim pretraživačima u jednom css pravilo za dobijanje željeni efekat, tj. za implementaciju u više pretraživača.
Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 i starije verzije */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 *//* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
U stvari, prvo i poslednje pravilo su neophodne za IE5.5+ i pretraživače koji razumeju CSS3 neprozirnost, a dva pravila u sredini očigledno ne prave nikakvu razliku, ali se ni ne mešaju (odlučite sami da li trebaju vam).
Javascript simbioza neprozirnosti
Pokušajmo sada postaviti transparentnost kroz skriptu, uzimajući u obzir karakteristike različitih pretraživača opisanih gore.
Funkcija setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Ako ne postoji element sa navedenim ID-om ili pretraživač ne podržava nijednu od metoda poznatih funkciji za kontrolu transparentnosti if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Ako je prozirnost već postavljena, onda je mijenjamo kroz kolekciju filtera, u suprotnom dodajemo 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(opacity="+nOpacity+")"; // Da ne biste prebrisali druge filtere, koristite "+=") drugo // Drugi pretraživači elem.style = nOpacity; ) funkcija getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3 usklađen (Moz 1.7+, Safari 1.2+, Opera 9) vrati "prozirnost"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 i ranije, Firefox 0.8 return "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"; return false; //nema transparentnosti }
Funkcija uzima dva argumenta: sElemId - id elementa, nOpacity - realan broj od 0.0 do 1.0 koji specificira transparentnost u CSS3 stilu neprozirnosti.
Mislim da je vrijedno objasniti IE dio koda funkcije setElementOpacity.
VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";
Može se postaviti pitanje, zašto ne postaviti transparentnost dodjeljivanjem (=) svojstvu elem.style.filter = "..."; ? Zašto koristiti "+=" da dodate svojstvo filtera na kraj niza? Odgovor je jednostavan, da se ne bi "prepisali" drugi filteri. Ali u isto vrijeme, ako dodate filter na ovaj način drugi put, on se neće promijeniti ranije postavljene vrijednosti ovaj filter, ali će jednostavno biti dodan na kraj niza svojstava, što nije ispravno. Stoga, ako je filter već postavljen, onda morate njime manipulirati kroz kolekciju filtera primijenjenih na element: elem.filters (ali imajte na umu da ako filter još nije dodijeljen elementu, onda njime upravljajte kroz ovu kolekciju nemoguće). Elementima kolekcije može se pristupiti ili po imenu filtera ili po indeksu. Međutim, filter se može specificirati u dva stila, kratkom IE4 stilu ili IE5.5+ stilu, koji se uzima u obzir u kodu.
Glatko promijenite transparentnost elementa
Gotovo rješenje. Korištenje biblioteke opacity.js
Osnovni koraci:
- Povezujemo biblioteku funkcija;
- Definirajte pravila koristeći metodu fadeOpacity.addRule();
- Mi zovemo metodu fadeOpacity() za promjenu prozirnosti od početne vrijednosti do krajnje vrijednosti, ili fadeOpacity.back() vratiti se početna vrijednost nivo transparentnosti.
Žvakanje
Kako spojiti biblioteku, mislim, može se vidjeti iz gornjeg primjera. Sada je vrijedno objasniti definiciju pravila. Prije pozivanja metoda za glatku promjenu transparentnosti, potrebno je definirati pravila po kojima će se proces odvijati: potrebno je definirati početnu i konačnu transparentnost i, po želji, odrediti parametar kašnjenja koji utiče na brzinu procesa promjene transparentnost.
Pravila se definiraju korištenjem metode fadeOpacity.addRule
sintaksa: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Argumenti:
- sRuleName - ime pravila, postavljeno proizvoljno;
- nStartOpacity i nFinishOpacity - početna i krajnja transparentnost, brojevi u rasponu od 0,0 do 1,0 ;
- nDelay - kašnjenje u milisekundama (opcijski argument, default je 30).
Samu prozirnost nazivamo fadingom koristeći metode fadeOpacity(sElemId, sRuleName), gdje je sElemId id elementa, a sRuleName ime pravila. Za vraćanje transparentnosti početno stanje koristi se metoda fadeOpacity.back(sElemId).
:hover za jednostavnu promjenu transparentnosti
Također napominjem da je za jednostavnu promjenu transparentnosti (ali ne i postepenu promjenu), pseudo-selektor taman :hover, koji vam omogućava da definirate stilove za element kada pređete mišem preko njega.
Imajte na umu da se slika nalazi unutar elementa A. Činjenica je da Internet Explorer do verzije 6 razumije :hover pseudo-selektor, samo primjenjuje se na linkove, a ne na bilo koji element, kao što bi trebalo biti u CSS-u (u IE7, situacija je ispravljena).
Transparentnost i nazubljeni tekst u IE
WITH Windows izdanje XP se pojavio anti-aliasing fontovi na ekranu metoda jasan tip, a s tim i nuspojave u IE-u pri korištenju ove metode anti-aliasinga. Što se tiče našeg slučaja, ako se transparentnost primeni na element sa tekstom sa omogućenom ClearType metodom anti-aliasing, tada tekst prestaje da se normalno prikazuje (podebljan tekst - bold, na primjer, dupli, mogu se pojaviti i različiti artefakti, na primjer, u obliku crtica, nazubljenog teksta). Da biste ispravili situaciju, za IE morate 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 moderna tehnika U poslednje vreme, što uzrokuje poteškoće u implementaciji više pretraživača. Još uvijek ne postoji univerzalna metoda, što bi omogućilo transparentnost za sve pretraživače. Međutim, situacija se značajno popravila posljednjih godina.
Ovaj članak detaljno opisuje postojeće pristupe i pruža primjere koda i objašnjenja koja će vam pomoći da to postignete isti rezultat u svim pretraživačima 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 koje bi trebalo postati dio CSS3 specifikacije.
stari pristup
U starom verzije Firefoxa i Safari treba primijeniti svojstvo ovako:
#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )
Svojstvo -khtml-opacity se koristilo u starijim verzijama webkit pretraživača. 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 vjerovatno.
V sljedeći red koristeći svojstvo -moz-opacity, koje je radilo za vrlo rane verzije Mozilla engine. Firefox je prestao da ga podržava u verziji 0.9.
CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi
Za većinu modernih pretraživača dovoljno je koristiti slijedeća nekretnina:
#myElement (prozirnost: .7; )
U gornjem primjeru, element je postavljen na 70% neprozirnosti (30% transparentnosti). Odnosno, ako postavimo vrijednost na jedan, tada će element biti neproziran i, shodno 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 je to jedva primjetno.
CSS transparentnost za Internet Explorer
Kao i obično, Internet Explorer nije prijateljski raspoložen sa drugim pretraživačima. Osim toga, sada imamo tri verzije ovog pretraživača u prilično širokoj upotrebi, od kojih je postavka transparentnosti u svakoj drugačija i ponekad zahtijeva dodatni napor da se dobije pozitivan rezultat.
#myElement (filter: alpha(opacity=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 biti postavljeno na true . Ovo svojstvo je prisutno samo u IE i više o njemu možete pročitati, na primjer, na Habré-u.
Drugi način da postavite transparentnost koristeći CSS u IE8 je korištenje sljedećeg pristupa (obratite pažnju 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 IE8 */ )
Prva linija će raditi u svim trenutno korištenim verzijama, druga - samo u IE8. Imajte na umu da drugi red koristi prefiks -ms- i da je vrijednost zatvorena pod 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 pretraživača document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // za IE
Naravno, u ovom slučaju je mnogo lakše koristiti jQuery, a radit će i u svim pretraživačima:
$("#myElement").css(( neprozirnost: .4 )); // radi u svim pretraživačima
Ovu nekretninu možete animirati:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animacija je završena; ovaj kod radi u svim pretraživačima. ));
RGBA funkcija
CSS3 planira da podrži alfa kanal sa rgba funkcijom. Ova funkcija radi u Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Koristi se ovako:
#rgba (pozadina: rgba(98, 135, 167, .4); )
U ovom slučaju posljednji parametar označava nivo neprozirnosti.
HSLA funkcija
Sviđa mi se prethodna funkcija, CSS3 vam takođe omogućava postavljanje prozirne boje pomoću HSLA funkcije, čiji parametri znače Hue (Nijansa), Saturation (Saturation), Brightness (Lightness) i Alpha kanal (Alpha).
#hsla ( pozadina: hsla(207, 38%, 47%, .4); )
Važna stvar kada se koriste funkcije rgba i hsla je da se postavka transparentnosti ne primjenjuje na podređene elemente, dok je korištenje svojstva neprozirnosti naslijeđeno.
Kako postaviti transparentnu boju u css? Trenutno postoje 3 načina da se to uradi.
Metoda 1 - transparentna vrijednost
Ako boju teksta ili pozadine postavite na transparentnu, boja će biti potpuno prozirna, tj. nevidljiva. primjer:
boja:transparentna;
Takav tekst neće biti vidljiv na stranici.
Metoda 2 - rgba režim boja
A ovo je već inovacija css3. Ranije u web razvoju nije postojao takav način rada, postojao je samo rgb. Sigurno znate kako napisati boju u ovom formatu. Da biste to učinili, trebate navesti tri vrijednosti u zagradama od 0 do 255, što ukazuje na zasićenost jedne od tri osnovne boje (crvena, zelena, plava). Na primjer:
Pozadina: rgb(230, 121, 156);
Rgba format se ne razlikuje, dodaje se samo četvrta vrijednost - stepen transparentnosti elementa od 0 do 1. Generalno, ovaj format notacije se uglavnom koristi za postavljanje 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.
Prozirna boja se može postaviti ako je četvrti parametar postavljen na vrijednost od 0,01 do 0,99. O je već pisao malo o postavljanju translucencije za pozadinu u , možete pročitati ako ste zainteresirani.
Metoda 3 - neprozirnost
Još jedno svojstvo iz css3 tehnologije. Ali želim da vas odmah upozorim da radi malo drugačije. Sa neprozirnošću, transparentnost se postavlja na cijeli blok na koji se primjenjuje. Tako se čitljivost teksta i percepcija slika pogoršavaju. Tako da vidim smisao u korištenju svojstva samo za blokove u kojima nema teksta i nekih drugih informacija. Vrijednosti se mogu postaviti od 0 do 1, kao u slučaju četvrtog parametra kada se navede boja u rgba formatu.
Općenito, na ovog trenutka ovo su svi načini koje znam za postavljanje transparentne boje u css-u. Zašto je to potrebno je drugo pitanje. Kroz providnu pozadinu vidi se šta se nalazi ispod. Ponekad to treba da se uradi na taj način dizajnom. Općenito, tehnika sa translucencijom je danas vrlo uobičajena.
Prozirna pozadina (pozadina)
Kao što možda znate, pozadina je CSS svojstvo koje vam omogućava da postavite boju pozadine ili otpremite sliku koja će djelovati kao pozadina.
Postavite transparentnost za css pozadinu
Dakle, sve se to radi vrlo jednostavno zahvaljujući takvom formatu snimanja u boji kao što je rgba. Ako radite sa grafički uređivači, ti to sigurno znaš način rada u boji rgb se dekodira na sljedeći način: udio crvene (crvene), proporcije zelene (zelene) i plave (plave). Dakle, rgba je skoro isti, samo se dodaje još jedan parametar - transparentnost. Napisano je ovako:
Boja pozadine: rgba(173, 57, 22, 0.5)
Prvo, eksplicitno ukazujemo da postavljamo boju u rgba modu. Zatim ukazujemo na 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 vrijednost upisana od 0 do jedan. 1 je potpuno neproziran element, a 0 je potpuno transparentan element. Shodno 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, trebate koristiti rgba način boje. Postoji i svojstvo neprozirnosti, ali se primjenjuje na cijeli element u cjelini. Odnosno, kada se primjenjuje neprozirnost, transparentnost se može primijeniti i na tekst, što će ga učiniti nečitljivim.
Primjer transparentne pozadine
Prednosti prozirne pozadine lako je pokazati na primjeru. Na primjer imamo opšta pozadina stranice. Ovako bi blok izgledao da mu je data puna crna boja:
A sada postavimo istu crnu boju za blok, ali je specificiraj koristeći rgba format boje, specificirajući posljednju vrijednost kao 0,7, na primjer. Ispast će ovako: 
Sada je pozadina bloka prozirna i možete vidjeti kroz nju pozadinska slika. Ova slika i pozadina služe samo u svrhu ilustracije. Kao što razumete, u css-u transparentnost pozadine može biti korisna kada vam je potrebna pozadina ugnežđenog elementa da se vidi bez zaklanjanja drugih pozadina koje se nalaze u drugim slojevima.
Postavite boju sa rgba nije teško. Kao što je već spomenuto, prva tri slova označavaju tri osnovne boje: crvenu, zelenu i plavu, odnosno njihov udio (od 0 do 255). Prepisivanje različita značenja možete dobiti milione različite boje, a prozirnost će vam omogućiti da smislite mnogo više prelepi efekti za sajt, ako je potrebno.
Nekretnina CSS neprozirnost odgovoran za transparentnost elemenata (slike, tekst, blokovi) u html-u.
CSS sintaksa
Gdje vrijednost može poprimiti stvarne vrijednosti u rasponu od 0,0 do 1,0. Vrijednost 1,0 znači da nema transparentnosti (podrazumevano).
Primjer #1. transparentna slika u html-u
Prva slika je prikazana bez transparentnosti, druga sa 0,5 prozirnosti.
Translucencija elementa
Učinite sliku prozirnom pri lebdenju!
DemoDownload izvoriHvala vam na pažnji!
Sljedeći članak
Kako kreirati div blok sa skrolom?
