Prozirni učinak elementa jasno je vidljiv na pozadinska slika i postao raširen u raznim operativni sustavi jer izgleda elegantno i lijepo. U web dizajnu također se koristi translucencija i postiže se svojstvom neprozirnosti ili RGBA formatom boje koji je postavljen za pozadinu.

Svojstvo neprozirnosti

Glavna značajka ovog svojstva je da vrijednost transparentnosti utječe na sve dječji elementi unutra, a ne samo u pozadini. To znači da će i pozadina i tekst postati prozirni i nećete moći povećati razinu prozirnosti dodavanjem . U tablici Slika 1 prikazuje izgled teksta i pozadine s različitim vrijednostima neprozirnosti.

Primjer 1 pokazuje kako stvoriti poluprozirni blok pomoću neprozirnosti.

Primjer 1: Pozadina na web stranici

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Obično bi prema dizajnu samo pozadina elementa trebala biti prozirna, a tekst bi trebao biti neproziran kako bi se zadržala čitljivost. Svojstvo neprozirnosti ovdje nije prikladno jer će tekst unutar elementa također biti djelomično proziran. Najbolje je koristiti RGBA format koji u svom sastavu ima alfa kanal, odnosno vrijednost transparentnosti. Vrijednost je napisana rgba, zatim su vrijednosti komponente crvene, plave i zelene boje navedene u zagradama, odvojene zarezima. Posljednja je prozirnost, koja se postavlja od 0 do 1 (slika 1), pri čemu 0 znači potpunu prozirnost, a 1 neprozirnost boje.

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

Primjer 2 prikazuje korištenje RGBA formata za stvaranje prozirne pozadine.

Primjer 2. Prozirna pozadina

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 2. Neprozirnost pozadine postavljena je na 90%.

Riža. 2. Prozirna pozadina i neproziran tekst

Bok svima. Kao što možda znate, pozadina je svojstvo CSS-a koje vam omogućuje postavljanje boje pozadine ili učitavanje slike koja će služiti kao pozadina. CSS3 je također uveo mogućnost stvaranja linearnih i radijalnih gradijenata, ali to je tema za drugi članak. U ovom sam vam želio reći kako postaviti transparentnost za svojstvo pozadine u CSS-u.

Postavite transparentnost za CSS pozadinu

Dakle, sve se to radi vrlo jednostavno zahvaljujući formatu snimanja u boji kao što je rgba. Ako radite sa grafički urednici, onda vjerojatno znate da rgb način boja označava ovo: udio crvene (crvene), udio zelene (zelene) i plave (plave). Dakle, rgba je praktički ista, samo je dodan još jedan parametar - transparentnost. Napisano je ovako:

Boja pozadine: rgba(173, 57, 22, 0,5)

Prvo izričito naznačimo da postavljamo boju u rgba modu. Zatim označavamo vrijednosti zasićenosti tri osnovne boje od 0 do 255, gdje je 255 najveća zasićenost. Četvrti parametar je naša transparentnost. Ovdje je zapisana vrijednost od 0 do jedan. 1 je potpuno neproziran element, a 0 je potpuno proziran element. Sukladno tome, ako je postavite na 0, boja pozadine uopće neće biti vidljiva.

Sada znate kako postaviti svojstvo pozadine na transparentnost u CSS-u. Da biste to učinili, morate koristiti rgba način rada u boji. Postoji i svojstvo neprozirnosti, ali ono se odnosi na cijeli element kao cjelinu. To jest, kada se primjenjuje neprozirnost, prozirnost se može primijeniti na tekst, čineći ga nečitljivim.

Primjer prozirne pozadine

Prednosti prozirne pozadine lako je pokazati na primjeru. Na primjer, imamo opću pozadinu stranice. Ovako bi blok izgledao da mu se da puna crna boja:

Postavimo sada istu crnu boju za blok, ali odredimo je koristeći format boja rgba, navodeći posljednju vrijednost kao 0,7, na primjer. Ispast će ovako:
Sada je pozadina bloka vidljiva kroz njega i pozadinska slika je vidljiva kroz njega. Ova slika i pozadina su samo za primjer. Kao što možete zamisliti, transparentnost pozadine u css-u može biti korisna kada želite da se pozadina ugniježđenog elementa vidi bez zaklanjanja drugih pozadina koje se nalaze na drugim slojevima.

Postavljanje same boje pomoću 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). Postavljanjem različitih vrijednosti možete dobiti milijune različitih boja, a translucencija će vam omogućiti da smislite mnogo ljepše efekte za stranicu, ako je potrebno.

Opis

Definira boju pozadine elementa. Iako ovo svojstvo ne nasljeđuje svojstva svog roditelja, zbog činjenice da početna vrijednost je postavljen na transparentan, boja pozadine podređenih elemenata odgovara boji pozadine nadređenog elementa.

Sintaksa

boja pozadine:<цвет>| proziran | naslijediti

Vrijednosti

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

U u ovom primjeru tri se koriste za elemente web stranice različiti putevi postavljanje boje pozadine. Rezultat primjera prikazan je na sl. 1.

Riža. 1. Primjena boje pozadine

Objektni model

document.getElementById("ID elementa ").style.backgroundColor

Preglednici

Inačice Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

Za stvaranje transparentnog efekta u CSS-u koristi se svojstvo neprozirnosti.

IE8 i starije verzije podržavaju alternativno svojstvo - filter:alpha(opacity=x) , gdje " x " može biti u rasponu od 0 do 100 , što je niža vrijednost, to će element biti transparentniji.

Svi ostali preglednici podržavaju standard CSS svojstvo opacity , koji kao vrijednost može uzeti broj od 0,0 do 1,0; što je niža vrijednost, to će element biti transparentniji:

Pokušajte »

Transparentnost pri lebdenju

Pseudo-class:hover vam omogućuje promjenu izgled elemenata kada kursorom miša prijeđete preko njih. Koristit ćemo ovu značajku kako bi slika izgubila prozirnost kada prijeđemo pokazivačem iznad:

Pokušajte »

Prozirnost pozadine

Postoje dva moguće načine učinite element transparentnim: gore opisano svojstvo neprozirnosti i određivanje boje pozadine u RGBA formatu.

Možda ste već upoznati s RGB modelom predstavljanja boja. RGB (Red, Green, Blue - crvena, zelena, plava) sustav je boja koji određuje nijansu miješanjem crvene, zelene i plave. Na primjer, da biste postavili boju teksta na žutu, možete koristiti bilo koju od sljedećih deklaracija:

Boja: rgb(255,255,0); boja: rgb(100%,100%,0);

Boje određene korištenjem RGB-a razlikovat će se od heksadecimalnih vrijednosti koje smo prethodno koristili po tome što dopuštaju upotrebu alfa kanala prozirnosti. To znači da će kroz pozadinu elementa s alfa prozirnošću biti vidljivo ono što se nalazi ispod njega.

Deklariranje RGBA boje slično je u sintaksi standardnim RGB pravilima. Međutim, također ćemo trebati deklarirati vrijednost kao RGBA (umjesto RGB) i navesti dodatnu decimalnu vrijednost prozirnosti nakon vrijednosti boje između 0,0 (potpuno prozirno) i 1 (potpuno neprozirno).

Boja: rgba(255,255,0,0.5); boja: rgba(100%,100%,0,0.5);

Razlika između svojstva neprozirnosti i svojstva RGBA je u tome što svojstvo neprozirnosti primjenjuje prozirnost na cijeli element, što znači da cijeli sadržaj elementa postaje proziran. A RGBA vam omogućuje postavljanje prozirnosti pojedinačnih dijelova elementa (na primjer, samo teksta ili pozadine):

Tijelo (pozadinska slika: url(img.jpg); ) .prim1 ( širina: 400px; margina: 30px 50px; boja pozadine: #ffffff; obrub: 1px puna crna; težina fonta: podebljano; neprozirnost: 0,5; filter : alpha(opacity=70); /*za IE8 i ranije*/ text-align: center; ) .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid crno; težina fonta: podebljano; poravnanje teksta: središte; ) Pokušajte »

Napomena: RGBA vrijednosti nisu podržane u IE8 i novijim verzijama ranije verzije. Da biste deklarirali zamjensku boju za starije preglednike koji ne podržavaju alfa vrijednosti boja, trebali biste je prvo navesti prije RGBA vrijednosti: pozadina: rgb(255,255,0); pozadina: rgba(255,255,0,0.5);

Svojstvo CSS RGBa omogućuje vam da postavite boju pozadine s alfa kanalom (tj. ispunite blokove poluprozirnom bojom).

Naravno, CSS ima svojstvo neprozirnosti, ali njegov glavni nedostatak je što će svi podređeni elementi unutar prozirnog bloka također naslijediti njegovu neprozirnost.

Najčešće koriste PNG24 od jednog piksela da popune pozadinu elementa i poprave prozirnost u IE6, ili učine pozadinu prozirnom pomoću css neprozirnosti. Tekst je pozicioniran odvojeno u drugom elementu, ali to, po mom mišljenju, nije sasvim zgodno...

Pomoću RGBa rješenje izgleda ovako:

1. Recimo da nam treba plava pozadina s 50% transparentnosti.

Ali IE6–8, Opera 9.x, to neće podržati, Mozilla Firefox 2.x

2. Za IE možete pokušati to učiniti elegantnije:

Bilješka: Boja u filtru određena je s 8 brojeva. Prva 2 broja su stupanj prozirnosti: FF - potpuno neprozirno, 00 - prozirno. Sljedećih 6 brojeva uobičajene su HTML oznake boja.

Korištenje RGBa nije ograničeno samo na boju pozadine blokova...