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ć napisao 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, trenutno su to svi načini za postavljanje transparentne boje u css-u. Zašto je to potrebno, drugo je 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čkim uređivačima, onda vjerojatno znate da se rgb režim boja dekodira na sljedeći način: udio crvene (crvene), proporcije zelene (zelene) i plave (plave). Dakle, rgba je skoro isti, samo je dodat 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. U skladu s tim, 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 također može primijeniti na tekst, što će ga učiniti nečitljivim.

Primjer transparentne pozadine

Prednosti prozirne pozadine lako je pokazati na primjeru. Na primjer, imamo opću pozadinu 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 pozadinska slika je vidljiva kroz nju. Ova slika i pozadina služe samo u svrhu ilustracije. Kao što razumijete, u css-u transparentnost pozadine može biti korisna kada vam je potrebna pozadina ugniježđenog elementa da se vidi kroz nju bez prikrivanja drugih pozadina koje se nalaze u drugim slojevima.

Samu boju nije teško podesiti pomoću rgba. Kao što je već spomenuto, prva tri slova označavaju tri osnovne boje: crvenu, zelenu i plavu, odnosno njihov udio (od 0 do 255). Postavljanjem različitih vrijednosti možete dobiti milione različitih boja, a prozirnost će vam omogućiti da smislite mnogo lijepih efekata za stranicu, ako je potrebno.

1. razred 2. razred 3. razred 4. razred 5

Detalji Kategorija: web dizajner Autor: SEO & WEB - KELL4

Kreiranje transparentne pozadine u HTML i CSS (prozirnost i RGBA efekti)

efekat translucencije Element je jasno vidljiv na pozadinskoj slici i postao je široko rasprostranjen u različitim operativnim sistemima, jer izgleda elegantno i lijepo. Glavna stvar je da ispod prozirnih blokova nema monokromatski uzorak, već sliku, u ovom slučaju transparentnost postaje vidljiva.

Ovaj efekat se postiže na različite načine, uključujući staromodne tehnike kao što je korištenje PNG slike kao pozadine, kreiranje karirane slike i korištenje svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodne nedostatke.

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

Glavna karakteristika ovog svojstva je da vrijednost transparentnosti utječe na sve podređene elemente unutar, a ne samo na pozadinu. To znači da će i pozadina i tekst postati prozirni. Nivo transparentnosti možete povećati promjenom naredbe za neprozirnost sa 0,1 na 1.

HTML 5 CSS 3 IE 9

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

Obično u dizajnu samo pozadina elementa treba da bude prozirna, a tekst treba da bude neproziran da bi bio čitljiv. Svojstvo neprozirnosti ovdje se ne uklapa jer će tekst unutar elementa također biti djelomično transparentan. Najbolje je koristiti RGBA format, čiji je dio alfa kanal, ili drugim riječima vrijednost transparentnosti. Vrijednost se piše rgba, a zatim su vrijednosti crvene, plave i zelene komponente boje navedene u zagradama odvojene zarezima. Posljednja dolazi transparentnost, koja je postavljena od 0 do 1, pri čemu je 0 potpuno transparentan, a 1 neproziran, sintaksa za primjenu rgba.

Polutransparentna pozadina HTML 5 CSS 3 IE 9

Vrijednost neprozirnosti za pozadinu je postavljena na 90% - prozirna pozadina i neproziran tekst.

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 propagira na sve podređene elemente roditelja. A to znači da će i tekst na prozirnoj pozadini biti proziran. A to je već vrlo značajan nedostatak, tekst se ne ističe tako dobro.

Snimak ekrana jasno pokazuje da je crni tekst postao proziran kao i 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 modernija alternativa za nekretninu 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 screenshot izgleda mnogo bolje od prvog.

Igrajući se sa prozirnošću pozadine blokova, možete postići zanimljive efekte na stranici. 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 korisnik 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.

Zaključak

Format RGBA podržavaju sve moderne pretraživače osim Internet Explorer. Takođe je veoma važno da RGBA fleksibilan, djeluje samo na određeni element, bez utjecaja na djecu. 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.

Transparentnost u CSS-u je prilično moderna tehnika u posljednje vrijeme, što uzrokuje poteškoće u implementaciji među pretraživačima. Do sada ne postoji univerzalna metoda koja bi omogućila implementaciju transparentnosti za sve pretraživače. Međutim, situacija se značajno popravila posljednjih godina.

Ovaj članak opisuje postojeće pristupe i pruža primjere koda i objašnjenja koja će vam pomoći da 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 starijim verzijama Firefoxa i Safarija, morate primijeniti svojstvo na sljedeći način:

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

Sljedeća linija koristi svojstvo -moz-opacity, koje je radilo na vrlo ranim verzijama Mozilla motora. 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 sljedeće svojstvo:

#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 nastrojen 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 za postavljanje transparentnosti 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 */ )

Prvi red će raditi u svim trenutno korištenim verzijama, drugi - 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 takođe će raditi 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 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 pokazuje nivo neprozirnosti.

HSLA funkcija

Kao i 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.

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 transparentnost postaje primjetna. Ovaj efekat se postiže na mnogo načina, a ako se sjećate svega, uključujući i staromodne metode, onda je to korištenje PNG slike kao pozadine, kreiranje karirane slike i svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodnu lošu stranu. Napravit ću kratak pregled kako bi postalo jasno o čemu se radi, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje efekta prozračnosti.

PNG kao pozadina

U grafičkom uređivaču se preliminarno priprema jednobojni prozirni crtež koji se pohranjuje u PNG-24 formatu (slika 1). Karakteristika ovog formata je podrška za 256 nivoa transparentnosti, ili jednostavno govoreći, može prikazati prozirne slike.

Rice. 1. Slika za kreiranje pozadine

Zatim dodajemo sliku kao pozadinu kroz svojstvo pozadine, kao što je prikazano u primjeru 1.

Primjer 1: Korištenje prozirnog uzorka

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 3.

Rice. 2. Nanošenje pozadine

Naslijeđeni pretraživač Internet Explorer 6 ne radi sa translucencijom u PNG-24, ako iz nekog razloga trebate podržati ovaj pretraživač, morat ćete koristiti skripte za njega.

Predstavljena metoda ima niz ograničenja. Dakle, kada isključite slike u pretraživaču, pozadina će potpuno nestati. Osim toga, nije tako lako promijeniti boju pozadine i vrijednost prozirnosti, za to ćete morati ponovo urediti sliku.

karirana slika

Ova metoda spada u drevne načine implementacije translucencije, kada pretraživači „ništa nisu mogli“, a morali ste tražiti rješenja koja nisu šablonska. Trik je u stvaranju slike koja se mijenja između prozirnih i neprozirnih piksela (slika 3). Takva pravilna struktura stvara efekat prozračnosti, u suštini ga imitirajući.

Rice. 3. Uvećani karirani uzorak

Evo kako to izgleda na kraju (slika 4).

Rice. 4. Imitacija translucencije

Nedostaci ove metode su uporedivi sa prethodnim, mogu se pojaviti i moire uzorci i dolazi do degradacije teksta.

svojstva neprozirnosti

Svojstvo neprozirnosti CSS 3 postavlja vrijednost transparentnosti i kreće se od 0 do 1, gdje je nula puna prozirnost elementa, a jedan, naprotiv, neprozirnost. Svojstvo neprozirnosti ima svojstvo - transparentnost se distribuira na sve podređene elemente i oni ne mogu premašiti vrijednost transparentnosti svog roditelja. Ispostavilo se da na prozirnoj pozadini ne može biti neprozirnog teksta (primjer 2).

Primjer 2: Korištenje neprozirnosti

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultat primjera prikazan je na sl. 5.

Rice. 5. Translucencija teksta i pozadine

U Internet Exploreru do i uključujući verziju 8.0, neprozirnost ne radi, pa se za to koristi svojstvo filtera specifičnog za pretraživač. Naravno, to rezultira nevažećim CSS kodom.

RGBA

Moderni pristup je mnogo jednostavniji i vizualniji od gore navedenih metoda i sastoji se od korištenja RGBA formata za boju i pozadinu. Prva tri slova su poznata mnogima i označavaju crvenu, zelenu, plavu (crvenu, zelenu, plavu), posljednje simbolizira alfa kanal i postavlja transparentnost elementa. Format zapisa je ovaj.

boja pozadine: rgba(r, g, b, a);

U zagradama se umjesto slova stavlja vrijednost komponente boje, može se vidjeti u bilo kojem grafičkom uređivaču, zadnja vrijednost postavlja transparentnost i odgovara vrijednosti svojstva neprozirnosti.

Ne podržavaju svi pretraživači ovaj format: Internet Explorer od verzije 9, Opera od verzije 10, Firefox od verzije 3, Safari od verzije 3.2. Ali općenito, moderni pretraživači ispravno prikazuju transparentnost. Za starije verzije IE-a možete posebno odrediti boju u uobičajenom formatu, dok, naravno, neće biti transparentnosti. Ili ponovo koristite svojstvo filtera, ali tada morate da se pomirite sa činjenicom da će i transparentnost uticati na tekst (primer 3). Da bih nametnuo važeći CSS kod, koristio sam uslovne komentare.

Primjer 3: Korištenje RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat primjera može se vidjeti na sl. 6.

Rice. 6. Polu-transparentna pozadina sa neprozirnim tekstom

Uporedite sliku sa prethodnom, slova su postala svetlija i jasnija.

U Internet Exploreru 7 otkrivena je greška prilikom kombinovanja boje pozadine sa različitim vrijednostima. Na primjer, ako boju pozadine postavite na crvenu, kao što je prikazano ispod, pozadina u IE7 se uopće neće prikazati.

Div (boja pozadine: crvena; /* Nije primjenjivo u IE7 */ boja pozadine: rgba(255, 0, 0, 0.5); )

Ovo se rješava zamjenom svojstva background-color sa background.

Div ( background: red; /* I ovo radi */ background: rgba(255, 0, 0, 0.5); ) Međutim, postoji jedno upozorenje. CSS validator "psuje" u pozadinu kada dobije RGBA vrijednost. Ali u isto vrijeme, ispravno se primjenjuje na boju pozadine. Općenito, kao i uvijek, morate birati između pretraživača i valjanosti.