Kako postaviti transparentnost u css - transparentni blok. CSS transparentnost - cross-browser rješenje Glatka promjena transparentnosti elementa

Učinak prozirnosti elementa jasno je vidljiv na pozadinskoj slici i postao je raširen u raznim operativni sustavi jer izgleda elegantno i lijepo. Glavna stvar je da ispod prozirnih blokova nema monokromatskog uzorka, već slike, u ovom slučaju prozirnost postaje vidljiva.

Taj se učinak postiže na različite načine, uključujući staromodne tehnike kao što je korištenje PNG slike kao pozadine, stvaranje kockaste slike i korištenje svojstva neprozirnosti. Ali čim se ukaže potreba učiniti u bloku kat prozirna pozadina, ove metode imaju neugodne nedostatke.

Razmotrite prozirnost teksta i pozadine - kako to ispravno koristiti u dizajnu web stranice:

Glavna značajka ovog svojstva je da vrijednost prozirnosti utječe na sve podređene elemente unutar, a ne samo na pozadinu. To znači da će i pozadina i tekst postati prozirni. Razinu prozirnosti možete povećati promjenom naredbe neprozirnosti s 0,1 na 1.

HTML 5 CSS 3 IE 9 tijelo neprozirnosti ( pozadina: url(images/cat.jpg); ) div ( neprozirnost: 0,6; pozadina: #fc0; /* Boja pozadine */ padding: 5px; /* Padding oko teksta */ ) Izrada i promocija stranica na internetu

U web dizajnu također se koristi djelomična transparentnost koja se postiže kroz RGBA format boja koji je postavljen samo za pozadinu elementa.

Obično bi u dizajnu samo pozadina elementa trebala biti prozirna, a tekst bi trebao biti neproziran kako bi ostao čitljiv. Svojstvo neprozirnosti ne odgovara ovdje jer će tekst unutar elementa također biti djelomično proziran. Najbolje je koristiti RGBA format, čiji je dio i alfa kanal, odnosno vrijednost prozirnosti. Vrijednost je napisana rgba, zatim su vrijednosti crvene, plave i zelene komponente boje navedene u zagradama odvojenim zarezima. Posljednja dolazi transparentnost, koja je postavljena od 0 do 1, pri čemu je 0 potpuno prozirno, a 1 neprozirno, sintaksa za primjenu rgba.

Poluprozirna pozadina HTML 5 CSS 3 IE 9 rgba tijelo ( pozadina: url(images/cat.jpg); ) div ( pozadina: rgba(0, 170, 238, 0.4); /* Boja pozadine */ boja: #fff ; / * Boja teksta */ padding: 5px; /* Margine oko teksta */ ) Izrada i promocija stranica na Internetu. Vrijednost neprozirnosti za pozadinu postavljena je na 90% - prozirna pozadina i neproziran tekst.

Za kontrolu prozirnosti elemenata stranice upotrijebite svojstvo neprozirnosti CSS-a. Prema specifikaciji, primjenjiv je na čvorove bilo koje vrste i podržan je u svim modernim preglednicima. Pomoću njega možete stvoriti zanimljiv dizajn ili implementirati praktično interaktivno korisničko iskustvo.

Sintaksa za svojstvo neprozirnosti u css-u izgleda ovako:

selektor ( neprozirnost: 1; ) selektor ( neprozirnost: 0; ) selektor ( neprozirnost: 0,4; )

Kao ulaz se prihvaćaju numeričke vrijednosti u rasponu od 0 do 1. Parametar može biti razlomak od jedan, dok se točka koristi kao razdjelnik između cijelog i razlomka u CSS-u.

Element s nultom transparentnošću postaje nevidljiv, ali i dalje zauzima svoje mjesto na stranici i zadržava mogućnost interakcije s korisnikom.

Ako je vrijednost svojstva različita od nule, tada će se stvarna prozirnost izračunati kao postotak neke gornje granice. U normalnoj situaciji, neprozirnost: 1 specificira punu neprozirnost elementa.

Međutim, ako element ima roditelja čija se transparentnost razlikuje od one, izračun se mijenja. Potomak ne može biti "manje transparentan" od bilo kojeg od svojih predaka. Vrijednost CSS svojstva neprozirnosti nadređenog bloka postaje gornja granica prozirnosti podređenog čvora.

Roditelj ( neprozirnost: 0,7; ) dijete ( neprozirnost: 1; )

U ovoj će situaciji podređeni element biti 30% proziran, iako je vrijednost neprozirnosti jedan.

Primjer 1. Translucencija. Potrebno je da glavna pozadina bloka bude vidljiva ispod ciljanog elementa.

Cilj (pozadina: crna; neprozirnost: 0,5;)

Ne samo da pozadina ciljanog bloka postaje prozirna, već i tekst.

Primjer 2: Dinamička kontrola transparentnosti. Vrijednost svojstva CSS neprozirnosti ciljnog bloka mijenja se kada prijeđete pokazivačem iznad njega.

Cilj ( neprozirnost: 0,2; ) .target: hover ( neprozirnost: 1; )

Posljednji primjer to pokazuje transparentni elementi nastaviti reagirati na događaje stranice kao što je lebdjenje. To vam omogućuje korištenje javascripta za kontrolu svojstva neprozirnosti CSS-a, kao i korištenje mehanizama prijelaza i animacije za glatku promjenu načina prikaza.

Da biste pristupili transparentnosti iz skripte, morate se pozvati na objekt stila određenog elementa.

// dohvati trenutnu vrijednost neprozirnosti var opacity = element.style.opacity; // postavljanje nove vrijednosti element.style.opacity = 0.4;

Glatki nestanak bloka može se implementirati korištenjem CSS svojstva prijelaza:

Element ( neprozirnost: 0,1; prijelaz: neprozirnost 1000 ms; ) element: hover ( neprozirnost: 0,8; prijelaz: neprozirnost 2000 ms; )

Sada će čvor elementa promijeniti svoju neprozirnost s 10% na 80% kada pređete mišem unutar jedne sekunde, a kada kursor ode, zatamnit će se na svoju izvornu vrijednost unutar dvije sekunde.

Svojstvo neprozirnosti CSS-a, u kombinaciji s mehanizmom prijelaza, omogućuje stvaranje prekrasnih efekata.

Glavne suptilnosti mehanizma neprozirnosti u CSS-u:

• njegovo djelovanje se proteže ne samo na pozadinu bloka, već i na njegov tekstualni sadržaj, koji je poželjno ostaviti jasnim;
• podređeni elementi ne mogu biti manje transparentni od roditeljskih elemenata.

Ako ovi efekti kompliciraju život dizajneru izgleda, umjesto neprozirnosti, trebali biste jednostavno koristiti prozirnu pozadinu, definirajući njezinu vrijednost u RGBA ili HSLA formatu.

/* 06.07.2006 */

Efekt prozirnosti tema je ovog članka. Ako vas zanima kako učiniti transparentnim elemente html stranice pomoću CSS-a ili Javascripta i kako postići više preglednika (isti rad u različitim preglednicima) s obzirom na Firefox preglednici, Internet Explorer, Opera, Safari, Konqueror, onda ste dobrodošli. Osim toga, razmotrite rješenje ključ u ruke postupna promjena transparentnosti koristeći javascript.

Pod simbiozom mislim na uniju različitim stilovima Za različitim preglednicima u jednom css pravilo kako bi se postigao željeni učinak, tj. za implementaciju na više preglednika.

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 i niže */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

Zapravo, prvo i posljednje pravilo su neophodni za IE5.5+ i preglednike koji razumiju neprozirnost CSS3, a dva pravila u sredini očito ne čine nikakvu razliku, ali se zapravo niti ne miješaju (odlučite sami hoćete li trebate ih).

Pokušajmo sada postaviti transparentnost kroz skriptu, uzimajući u obzir gore opisane značajke različitih preglednika.

Funkcija setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Ako ne postoji element s navedenim ID-om ili preglednikom ne podržava niti jednu od metoda poznatih funkciji za kontrolu prozirnosti if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Ako je prozirnost već postavljena, promijenite je kroz filtere zbirka, inače dodajte prozirnost 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+")"; // Kako ne biste prebrisali druge filtre, koristite "+=" ) else // Drugi preglednici elem.style = nOpacity; ) funkcija getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3 usklađen (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; 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 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; vratiti lažno; // nema transparentnosti )

Funkcija uzima dva argumenta: sElemId - ID elementa, nOpacity - pravi broj od 0.0 do 1.0 postavljanje CSS3 neprozirnosti transparentnosti.

Mislim da vrijedi objasniti IE dio koda funkcije setElementOpacity.

VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filteri.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 "+=" za dodavanje svojstva filtra na kraj niza? Odgovor je jednostavan, kako ne bi "prebrisali" druge filtere. Ali u isto vrijeme, ako dodate filtar na ovaj način drugi put, tada neće promijeniti prethodno postavljene vrijednosti ovog filtra, već će se jednostavno dodati na kraj retka svojstva, što nije točno. Stoga, ako je filtar već postavljen, tada morate njime manipulirati kroz kolekciju filtara primijenjenih na element: elem.filters (ali imajte na umu da ako filtar još nije dodijeljen elementu, tada je nemoguće upravljati kroz ovu zbirku). Elementima zbirke može se pristupiti ili po nazivu filtra ili po indeksu. Međutim, filtar se može specificirati u dva stila, kratki IE4 stil ili IE5.5+ stil, koji se uzima u obzir u kodu.

Spremno rješenje. Korištenje biblioteke opacity.js

img (filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Kreirajte pravilo za promjenu transparentnosti: postavite naziv pravila, početnu i krajnju transparentnost , i izborni parametar kašnjenja koji utječu na brzinu promjene prozirnosti fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />

Kako povezati knjižnicu, mislim, može se vidjeti iz gornjeg primjera. Sada je vrijedno objasniti definiciju pravila. Prije pozivanja metoda za glatku promjenu prozirnosti potrebno je definirati pravila po kojima će se proces odvijati: potrebno je definirati početnu i konačnu prozirnost te po želji odrediti parametar kašnjenja koji utječe na brzinu procesa promjene prozirnost.

Pravila se definiraju pomoću metode fadeOpacity.addRule

Sintaksa: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argumenti:

• sRuleName - ime pravila, postavljeno proizvoljno;
• nStartOpacity i nFinishOpacity - početna i završna transparentnost, brojevi u rasponu od 0.0 do 1.0 ;
• nDelay - kašnjenje u milisekundama (neobavezni argument, zadano je 30).

Samu prozirnost nazivamo blijeđenjem koristeći metode fadeOpacity(sElemId, sRuleName), gdje je sElemId id elementa, a sRuleName naziv pravila. Da se vrati transparentnost početno stanje koristi se metoda fadeOpacity.back(sElemId).

Također napominjem da je za jednostavnu promjenu prozirnosti (ali ne i postupnu promjenu), pseudo-selektor :hover sasvim prikladan, koji vam omogućuje da definirate stilove za element u trenutku kada iznad njega prijeđete mišem.

a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0,3; -khtml-opacity: 0,3; neprozirnost: 0,3; )

Imajte na umu da je slika smještena unutar elementa A. Činjenica je da Internet Explorer, do verzije 6, razumije pseudo-selektor :hover samo u odnosu na poveznice, a ne na bilo koje elemente, kao što bi trebalo biti u CSS-u (u IE7 situacija je ispravljena) .

Izlaskom Windowsa XP pojavio se ClearType anti-aliasing zaslonskih fontova, a s njim i nuspojave u IE-u pri korištenju ove metode anti-aliasinga. Što se tiče našeg slučaja, ako je prozirnost primijenjena na element s tekstom s omogućenom ClearType anti-aliasing metodom, tada se tekst više ne prikazuje normalno (podebljani tekst - podebljani, na primjer, duplira se, mogu se pojaviti i razni artefakti, na primjer, u obliku crtica, nazubljeni tekst). Da biste ispravili situaciju, za IE trebate postaviti boja pozadine, CSS svojstvo background-color , element na koji se primjenjuje prozirnost. Srećom, IE7 je popravio grešku.

orem Ipsum jednostavno je lažni tekst tiskarske i slovne industrije. Lorem Ipsum bio 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. populariziran 1960-ih izdavanjem listova Letraset koji sadrže Lorem Ipsum odlomke, 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 odvući 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 pojma "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 govoriti o transparentnosti u html stranicama. Vjerojatno ste naišli na transparentne pop-up blokove, bilo da se radi o galeriji fotografija ili obrascima za autorizaciju na nekom popularnom mjestu. Postoje mnoge upotrebe transparentnosti u HTML-u. Dakle, kako se pravi i gdje se može koristiti?

Pa, za početak, pojasnimo 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, ako se nalazi na vrhu hrpe zaslona, ​​blokirat će pristup drugim elementima. Ovo je jedna od glavnih namjena prozirnih blokova. Iako se obično koristi efekt sjenčanja, potpuno transparentni sloj će raditi jednako. Tako, na primjer, rade mnoge popularne fotogalerije, organiziran je osjenčani sloj u kojem se prikazuju fotografije i kontrole za njih. Ostatak prostora stranice je "prekriven" (polu)transparentnim slojem koji blokira pristup svim ostalim elementima na stranici. Oni. napuštanje stranice klikom na bilo koju vezu neće funkcionirati - sav je tekst prekriven pozadinom. Za povratak na tijelo web-mjesta obično su dostupne kontrole za zatvaranje galerije, obrazac za prijavu itd. Kontrolirajte prikazivanje/skrivanje prozirnih blokova pomoću javascripta. Nažalost, tu nema alternative. Bez toga, 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 elemenata 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. Odnosno koristi ugrađenu funkciju filtera, drugi preglednici koriste svojstvo "opacity", koje se kreće od 0 (potpuno transparentan objekt) do 1 (potpuno neproziran). Na primjer, u slučaju prozirnosti od 30%, trebali biste napisati "opacity:0.30; filter:alpha(opacity=30); ". Kao što se može vidjeti iz primjera, svojstva su slična - samo u prvom slučaju koristi se broj od 0 do 1, u drugom zapis postotka. Primjer takvog bloka: