Postoje tri načina za promjenu transparentnosti elementa u CSS-u:
koristeći svojstvo neprozirnosti,
pomoću funkcije rgba (),
pomoću funkcije hsla ().

1. Svojstvo neprozirnosti

Svojstvo neprozirnosti omogućuje vam da bilo koji element web stranice učinite djelomično ili potpuno transparentnim. Ovo svojstvo mijenja prozirnost elemenata koji imaju pozadinsku sliku (sliku) ili pozadinu s bojom ili gradijentom. Ako element za koji je primijenjeno svojstvo neprozirnosti sadrži druge elemente unutar sebe, oni će također promijeniti svoju neprozirnost.
Svojstvo neprozirnosti kreće se od 0 (potpuno prozirno) do 1 (neprozirno), na primjer:

H1 (boja: # CD6829;) div (pozadina: # CDD6DB; neprozirnost: .3;)
Riža. 1. Transparentnost elemenata pomoću neprozirnosti

2. Funkcija rgba ().

RGBA model boja stvara odljev boja miješanjem u potrebnim omjerima crvena (crvena), zelena (zelena) i plava boje, i alfa kanal (Alfa) odgovoran je za stupanj transparentnosti boje. Za razliku od svojstva neprozirnosti, za blok koji sadrži druge elemente, funkcija rgba () samo će promijeniti neprozirnost bloka.

Riža. 2. RGB model boje h1 (boja: # CD6829;) div (pozadina: rgba (205, 214, 219, 0.3);)
Riža. 3. Transparentnost elemenata pomoću funkcije rgba ().

3. Funkcija hsla ().

Hsla () funkcija čiji parametri znače ton (Nijansa), zasićenje, svjetlina (svjetlina) i alfa kanal (Alfa), također vam omogućuje postavljanje poluprozirne boje.

Nijanse boja određuju se kao postotak pomoću odgovarajuće vrijednosti iz kotača boja. Sam krug podijeljen je na sektore, na čijim se granicama nalaze primarne boje:

0/360 ° - crveno
60 ° - žuta
120 ° - zeleno
180 ° - plava
240 ° - plava
270 ° - ljubičasta
300° je magenta.

Da biste dobili crnu boju, morate postaviti vrijednosti nijanse, zasićenosti i svjetline na nulu - hsla (0, 0%, 0%, 1). Bijela se dobiva pri 100% osvjetljenosti hsla (0, 0%, 100%, 1), a siva se dobiva pri nultom zasićenju hsla (0, 0%, 50%, 1).

S pojavom CSS3, posao dizajnera izgleda postao je puno lakši i logičniji: sada možete stvarno fleksibilno prilagoditi bilo koji objekt, koristeći sve manje i manje JavaScript. Recimo da trebate podesiti prozirnost pozadine – CSS odmah nudi nekoliko opcija.

Pozadinu postavlja skup atributa, background-repeat, background-attachment, background-origin, background-clip, background-color), a svaki od njih se može napisati zasebno ili kombinirati pod atributom pozadine. Pogledajmo pobliže svaki od njih.

Atribut boje pozadine

Čak i IE8 podržava ovu metodu. Nekoliko slika koristi se kao pozadina za tekući izgled. Ono što je najvažnije, nemojte zaboraviti postaviti boju pozadine u CSS-u kada koristite bilo koju sliku, jer se slika možda jednostavno neće učitati za korisnike.

Atribut pozadinske pozicije

Ako koristite sliku za postavljanje pozadine bloka, CSS će vam omogućiti da postavite sliku bilo gdje na zaslonu. Prema zadanim postavkama, slika se nalazi u gornjem lijevom kutu. Atribut prihvaća ili verbalne naznake (gore, dolje, lijevo, desno) ili numeričke naznake (postotke, piksele i druge jedinice). U tom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

tijelo (položaj pozadine: desno središte;) - u ovom primjeru, pozadina će se nalaziti na desnoj strani stranice, s istim razmacima odozdo i odozgo prema slici.

Atribut veličine pozadine

Ponekad trebate koristiti CSS za rastezanje ili smanjenje veličine pozadine. Za to se koristi atribut background-size, a veličina pozadine može se postaviti u pikselima ili postocima, te u bilo kojoj drugoj mjernoj jedinici.

Postoje neki problemi s ovim atributom: prefiksi se moraju koristiti za ispravan prikaz pozadine u starijim verzijama preglednika. Naravno, trenutne verzije u potpunosti podržavaju ovaj atribut i potreba za određenim svojstvima je nestala.

Atribut pozadine privitka

Ovaj atribut određuje ponašanje pomicanja pozadinske slike. Dakle, može imati 3 vrijednosti (isključujući nasljeđivanje, koje je zajedničko svim atributima predstavljenim u ovom članku):

• fiksno- čini sliku na pozadini nepomičnom;
• svitak- pozadina se pomiče zajedno s ostalim elementima;
• lokalni- slika u pozadini se pomiče ako se sadržaj pomiče. Snimljene su pozadine koje nadilaze sadržaj.

Primjer upotrebe:

tijelo (pozadinski prilog fiksni).

Firefox trenutno ne podržava potonje svojstvo (lokalno).

Atribut porijekla pozadine

Ovaj atribut je odgovoran za pozicioniranje elementa. Raniji preglednici zahtijevaju upotrebu prefiksa. Samo svojstvo ima tri parametra:

• padding-box postavlja pozadinu u odnosu na rub, uzimajući u obzir debljinu okvira;
• rubni okvir razlikuje se od prethodnog svojstva po tome što granična linija može u potpunosti ili djelomično preklapati pozadinu;
• sadržaj-kutija pozicionira sliku povezujući je sa sadržajem.

Ako je dano više vrijednosti, preglednici mogu drugačije reagirati: Firefox i Opera prihvaćaju samo prvu opciju.

Atribut pozadine ponavljanja

Obično, ako je pozadina definirana slikom, trebala bi se ponavljati vodoravno ili okomito. Tome služi atribut background-repeat. Dakle, pozadina bloka čiji CSS sadrži takvo svojstvo može imati jedan od nekoliko parametara:

• bez ponavljanja- slika se pojavljuje na stranici u jednoj verziji;
• ponoviti- pozadina se ponavlja duž x i y osi;
• ponoviti-x- samo vodoravno;
• ponovi-y- samo okomito;
• prostor- pozadina se ponavlja, ali ako se prostor ne može popuniti, pojavljuju se praznine između slika;
• krug- slika je skalirana ako je nemoguće ispuniti cijelo područje cijelim slikama.

Primjer korištenja atributa:

tijelo (ponavljanje u pozadini: ponavljanje bez ponavljanja)- slično background-repeat: repeat-y.

U CSS3 je moguće postaviti vrijednosti za više slika navođenjem parametara odvojenih zarezima.

Atribut pozadinskog isječka

Ovaj atribut definira ponašanje pozadine ispod granica (na primjer, u slučaju isprekidanih granica):

• padding-box- pozadina se prikazuje strogo unutar bloka;
• rubni okvir- slika ide ispod okvira;
• sadržaj-kutija- slika u pozadini pojavljuje se samo unutar sadržaja.

Primjer upotrebe:

tijelo (pozadina-isječak: kutija sadržaja;).

Chrom i Safari zahtijevaju prefiks -webkit-.

Prozirnost i atributi filtera

Atribut neprozirnosti omogućuje postavljanje transparentnosti pozadine - CSS svojstvo će raditi u svim preglednicima. Vrijednost je postavljena u rasponu od 0,0 do 1,0 uključujući. U ovom slučaju možete postaviti transparentnost CSS pozadine bez cjelobrojne vrijednosti: umjesto 0,3, dovoljno je napisati 3:

.blok (pozadinska slika: url (img.png); neprozirnost: .3;).

Za postavljanje transparentnosti pozadine, čiji će CSS raditi čak i za IE ispod devete verzije, koristite atribut filtera:

.block (pozadinska slika: url (img.png); filter: alfa (prozirnost = 30);).

U ovom slučaju, vrijednost neprozirnosti je postavljena u rasponu od 0 do 100. Imajte na umu da se atribut neprozirnosti razlikuje od postavke neprozirnosti koja koristi RGBA u nasljeđivanju: kada se koristi neprozirnost, ne samo pozadina postaje prozirna, već i svi elementi unutar bloka .

Uvijek pratite statistiku korištenja preglednika u CIS-u i svim ostalim zemljama. Najveći problem svih dizajnera izgleda su stare verzije IE, one ne dopuštaju puno korištenje CSS3. Prilikom kodiranja ne zaboravite koristiti posebne usluge koje provjeravaju podržava li vaš preglednik bilo koje CSS svojstvo. Ako ne možete instalirati stare verzije preglednika, pronađite uslugu koja će na mreži provjeriti rad web stranice u različitim preglednicima.

U ovoj lekciji analizirat ćemo takve CSS Svojstva - neprozirnost i RGBA... Vlasništvo Neprozirnost odgovoran je samo za transparentnost elemenata i funkciju RGBA- za boju i prozirnost, ako navedete vrijednost prozirnosti alfa kanala.

CSS neprozirnost

Brojčana vrijednost za neprozirnost specificirano u rasponu od 0,0 do 1,0, gdje je nula puna prozirnost, a jedan, naprotiv, apsolutna neprozirnost. Na primjer, da biste vidjeli 50% transparentnosti, trebate postaviti vrijednost na 0,5. Mora se imati na umu da neprozirnost proteže se na svu djecu roditelja. To znači da će tekst na prozirnoj pozadini također biti proziran. A to je već vrlo značajan nedostatak, tekst se ne ističe tako dobro.

Na snimci zaslona možete jasno vidjeti da je crni tekst postao jednako proziran kao i plava pozadina.

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

CSS transparentnost u RGBA formatu

Format za snimanje boja RGBA, modernija je alternativa nekretnini neprozirnost. R (crvena), G (zelena), B (plava)- znači: crvena, zelena, plava. Zadnje slovo A- znači alfa kanal, koji postavlja transparentnost. RGBA Za razliku od Neprozirnost ne utječe na djecu.

Pogledajmo sada naš primjer korištenja RGBA... Zamijenimo ove retke u stilovima.

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

na sljedeći jedan redak

Pozadina: rgba (2, 127, 212, 0,3);

Kao što možete vidjeti, vrijednost transparentnosti od 0,3 je ista za obje metode.

Rezultat primjera s RGBA:

Druga snimka zaslona izgleda puno bolje od prve.

Igrajući se s prozirnošću pozadine blokova, možete postići zanimljive efekte na mjestu. Važno je da ovi prozirni blokovi idu preko raznolikog dizajna kao što je fotografija. Samo u ovom slučaju učinak će biti vidljiv. Ova se tehnika dugo koristila u dizajnu, čak i prije pojave bilo koje CSS3, implementiran je isključivo u grafičkim programima.

Ako kupac zahtijeva da izgled izgleda dobro u starijim verzijama preglednika Internet Explorer zatim dodajte svojstvo filtar i ne zaboravite komentirati kako to ne bi utjecalo na valjanost koda.

Izlaz

Format RGBA podržavaju svi moderni preglednici osim Internet Explorer... Također je vrlo važno da RGBA fleksibilan, djeluje samo na točno određeni element, bez utjecaja na djecu. Jasno je da je to prikladnije za dizajnera izgleda. Moj izbor očito ide u prilog formatu RGBA primiti transparentnost u CSS-u.

Radi bolje konsolidacije materijala i veće jasnoće, predlažem da prođete.

Učinak prozirnosti elementa jasno je vidljiv na pozadinskoj slici i postao je raširen u različitim operativnim sustavima, 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.

Svojstvo neprozirnosti

Glavna značajka ovog svojstva je da vrijednost transparentnosti utječe na svu djecu unutra, a ne samo na pozadinu. To znači da će i pozadina i tekst postati prozirni i nećete moći povećati razinu prozirnosti dodavanjem. Stol 1 prikazuje izgled teksta i pozadine s različitim vrijednostima neprozirnosti.

Primjer 1 pokazuje kako stvoriti poluprozirni blok koristeći neprozirnost.

Primjer 1. Pozadina na web stranici

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Obično, prema dizajnu, samo pozadina elementa treba biti poluprozirna, a tekst treba biti neproziran kako bi se zadržala čitljivost. Svojstvo neprozirnosti ovdje je neprikladno jer će tekst unutar elementa također biti djelomično proziran. Najbolje je koristiti RGBA format, čiji je dio alfa kanal, ili drugim riječima vrijednost transparentnosti. Vrijednost je napisana rgba, a zatim su vrijednosti komponenti crvene, plave i zelene boje navedene u zagradama odvojene zarezima. Posljednja je prozirnost, koja je postavljena od 0 do 1 (slika 1), pri čemu je 0 puna prozirnost, a 1 neprozirnost boje.

Riža. 1. Sintaksa za korištenje rgba

Primjer 2 prikazuje RGBA format koji se koristi za stvaranje poluprozirne pozadine.

Primjer 2. Poluprozirna pozadina

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 2. Vrijednost neprozirnosti za pozadinu postavljena je na 90%.

Riža. 2. Poluprozirna pozadina i neproziran tekst