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. To postići puna transparentnost, samo trebate 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. Preko puta transparentna pozadina možete vidjeti šta je 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. Ima li još svojstva neprozirnosti, ali se odnosi na 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 pozadina prozirnost može biti korisna kada želite da se pozadina ugniježđenog elementa vidi bez prikrivanja drugih pozadina na 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.

U ovoj lekciji ćemo ih pogledati css svojstva - neprozirnost I RGBA. Nekretnina Opacity odgovoran je samo za transparentnost elemenata i funkcije RGBA- za boju i transparentnost, ako navedete vrijednost prozirnosti alfa kanala.

CSS neprozirnost

Numerička vrijednost za neprozirnost postavljeno u rasponu od 0,0 do 1,0, gdje je nula puna transparentnost, a jedan, naprotiv, apsolutna neprozirnost. Na primjer, da biste vidjeli 50% transparentnosti, trebate postaviti vrijednost na 0,5. To se mora imati na umu neprozirnost odnosi se na sve podređeni elementi roditelj. A to znači da će i tekst na prozirnoj pozadini biti proziran. A ovo je već jako značajan nedostatak, tekst se ne ističe tako dobro.

Snimak ekrana jasno pokazuje da je crni tekst postao proziran kao plava pozadina.

Div (
pozadina: url(images/yourimage.jpg); /* Pozadinska slika */
širina: 750px
visina: 100px;
margina: auto;
}
.blue(
pozadina: #027av4; /* Prozirna boja pozadine */
neprozirnost: 0,3 /* Vrijednost prozirnosti pozadine */
visina: 70px;
}
h1 (
padding: 6px
porodica fontova: Arial Black;
font-weight: bolder;
veličina fonta: 50px;
}

CSS transparentnost u RGBA formatu

Format za pisanje boja RGBA, je više moderna alternativa za imovinu neprozirnost. R (crvena), G (zelena), B (plava) znači: crvena, zelena, plava. poslednje pismo A- označava alfa kanal, koji postavlja transparentnost. RGBA Za razliku od Opacity ne utiče na podređene elemente.

Pogledajmo sada naš primjer korištenja RGBA. Zamenimo ove linije u stilovima.

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

do sledećeg reda

Pozadina: rgba(2, 127, 212, 0.3);

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

Rezultat RGBA primjera:

Drugi snimak ekrana izgleda mnogo bolje od prvog.

Igrajući se sa prozirnošću pozadine blokova, možete postići na stranici zanimljivi efekti. Važno je da ovi prozirni blokovi idu preko šarenog uzorka, kao što je fotografija. Samo u ovom slučaju efekat će biti vidljiv. Ova tehnika se koristi u dizajnu dugo vremena, čak i prije pojave bilo koje CSS3, implementiran je isključivo u grafičkim programima.

Ako kupac traži da izgled izgleda dobro u starijim verzijama pretraživača Internet Explorer zatim dodajte svojstvo filter i ne zaboravite da komentarišete kako ne bi narušila valjanost koda.

Izlaz

Format RGBA podržavaju sve moderne pretraživače osim Internet Explorer. Takođe je veoma važno da RGBA fleksibilan, utiče samo na određene dati element bez uticaja na decu. Jasno je da je to zgodnije za kodera. Moj izbor svakako ide u prilog formatu RGBA za dobijanje transparentnost u css.

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

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?

Za promjenu stepena transparentnosti elementa koristi se svojstvo stila neprozirnost sa vrijednošću od 0 do 1, gdje 0 odgovara punoj transparentnosti, a 1, naprotiv, neprozirnosti objekta. U Internet Exploreru ovo svojstvo ne radi, tako da morate koristiti filter posebno za njega, svojstvo koje nije dio 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 monokromatski uzorak, već slika, u ovom slučaju transparentnost postaje primjetna. 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 se ukaže potreba raditi u bloku prozirna pozadina, ove metode imaju neugodan 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 s ovim svojstvom, s 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.

Određuje nivo transparentnosti elementa web stranice. Uz djelomičnu ili potpunu transparentnost, element se prozire pozadinska slika ili drugih elemenata ispod prozirnog objekta.

kratke informacije

Notacija

Vrijednosti

Vrijednost je broj iz raspona. Vrijednost 0 odgovara punoj transparentnosti elementa, 1, naprotiv, njegovoj neprozirnosti. Razlomci brojeva tip 0,6 set translucencije. Dozvoljeno je pisati brojeve bez početne nule, kao što je neprozirnost: .6 .

Sandbox

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest sati ujutro, jer je tada doručak već odavno bio završen, a večera nije ni pomislila da počne. I, naravno, užasno mu je bilo drago kada je vidio da Zec vadi šolje i tanjire.

div ( neprozirnost: 1 ; )

Primjer

Rezultat ovaj primjer prikazano na sl. jedan.

Rice. 1. Rezultat korištenja neprozirnosti

Objektni model

Objekt.style.opacity

Bilješka

Firefox do verzije 3.5 podržava svojstvo -moz-opacity.

Internet Explorer prije verzije 9.0 koristi filtere za promjenu transparentnosti, za ovaj pretraživač bi trebali napisati filter : alpha(opacity=50) , gdje parametar neprozirnosti može imati vrijednost od 0 do 100.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka (Recommendation) - specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
• Radni nacrt – zrelija verzija nacrta nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) je nacrt standarda nakon što su urednici projekta izvršili izmjene.
• nacrt ( Nacrt specifikacije) je prva verzija verzije standarda.

/* 06.07.2006 */

CSS transparentnost (css neprozirnost, javascript neprozirnost)

Efekat transparentnosti je tema ovog članka. Ako ste zainteresovani da znate kako da napravite transparentne elemente html stranice koristeći CSS ili Javascript i kako da postignete cross-browser (isti rad u različitim pretraživačima) s obzirom na Firefox pretraživači, Internet Explorer, Opera, Safari, Konqueror, onda ste dobrodošli. Osim toga, 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

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" />

Osnovni koraci:

1. Povezujemo biblioteku funkcija;
2. Definirajte pravila koristeći metodu fadeOpacity.addRule();
3. 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

OD 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 popravili situaciju, za IE morate postaviti boju pozadine, CSS svojstvo boja pozadine Element na koji se primjenjuje transparentnost. Srećom, IE7 je ispravio grešku.