transparentna css slika. Stvaranje prozirne pozadine u HTML-u i CSS-u (neprozirnost i RGBA efekti). Gdje mogu nabaviti ove brojeve

Učinak prozirnosti elementa jasno je vidljiv na pozadinskoj slici i postao je raširen u raznim operativni sustavi jer izgleda elegantno i lijepo. U web dizajnu, translucencija se također koristi 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 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 i neće uspjeti povećati razinu prozirnosti dodavanjem . U tablici. Slika 1 prikazuje izgled teksta i pozadine s različitim vrijednostima neprozirnosti.

Primjer 1 pokazuje kako stvoriti proziran okvir 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 sačuvala njegova čitljivost. 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. Na kraju dolazi prozirnost koja se postavlja od 0 do 1 (slika 1), dok 0 znači punu prozirnost, a 1 neprozirnost boje.

Riža. 1. Sintaksa korištenja rgba

Primjer 2 prikazuje primjenu RGBA format za stvaranje prozirne pozadine.

Primjer 2: Poluprozirna pozadina

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Riža. 2. Poluprozirna pozadina i neproziran tekst

Vrlo često možete pronaći odgovarajuću sliku na Internetu, na primjer, da je umetnete na web mjesto. Ili možda radite kolaž, a na jednu sliku morate dodati druge. To je samo željene slike obično imaju neku vrstu pozadine.

Da vidimo kako možemo napravite prozirnu pozadinu za sliku pomoću uređivačaAdobephotoshop. Instalirao sam engleska verzija Adobe Photoshop CS5, pa ću pokazati na njemu.

Pokušat ću donijeti razne kombinacije vruće tipke.

Ako još nemate instaliran Photoshop, rijetko ga koristite ili je na engleskom, prozirnu pozadinu možete napraviti u Paint.net. Ovo je jednostavan uređivač slika na ruskom jeziku koji neće zauzeti puno prostora na vašem tvrdom disku. Klikom na poveznicu možete pročitati detaljan članak. Program Paint.net možete preuzeti s naše web stranice.

Počnimo s jednostavnim primjerom. Pretpostavimo da imate sliku obična pozadina, to može biti logotip ili naziv nečega. Napravimo ovaj logo ili natpis na prozirnoj pozadini u Photoshopu.

Otvorite željenu sliku u editoru. Sada napravimo prozirnu pozadinu za sloj. U prozoru "Slojevi" dvaput kliknite na dodani sloj - nasuprot njemu će se nalaziti brava. Otvorit će se prozor New Layer, kliknite OK. Nakon toga, brava će nestati.

Odaberite alat Čarobni štapić. Na traci svojstava odredite razinu osjetljivosti, postavite različite vrijednosti da biste razumjeli kako radi, na primjer, 20 i 100. Da biste poništili odabir slike, pritisnite "Ctrl + D".

Postavite osjetljivost i pritisnite čarobni štapić na području pozadine. Da biste odabranoj pozadini dodali one dijelove koji nisu odabrani, držite pritisnut "Shift" i nastavite odabir. Za brisanje odabranih područja kliknite "Izbriši".

Sada, umjesto pozadine, šahovnica - to znači da smo bijelu pozadinu uspjeli učiniti prozirnom. Uklonite odabir - "Ctrl + D".

Ako imate sliku ili fotografiju koja ima puno različitih boja i objekata, pogledajmo kako napraviti prozirnu pozadinu za sliku u Photoshopu.

U ovom slučaju koristit ćemo se alatom za brzi odabir. Kliknemo na čarobni štapić lijevom tipkom miša s malim kašnjenjem i iz izbornika odaberemo željeni alat.

Sada trebamo odabrati objekt koji želimo ostaviti na prozirnoj pozadini. Na traci svojstava postavite različite veličine i kliknite na objekt, dodajući mu područja. Ako je greškom označena nepotrebna pozadina, pritisnite "Alt" i uklonite je.

Pritisnite "Q" za pregled rezultata. Dijelovi slike koji postanu prozirni bit će istaknuti ružičastom bojom.

Kopirajte odabrana područja pritiskom na "Ctrl + C". Zatim stvorite novu datoteku, "Ctrl + N", s prozirnom pozadinom.

Zalijepite kopirane fragmente u njega, "Ctrl + V". Ako na njima ima nepotrebnih dijelova pozadine, uklonite ih alatom Eraser. Spremamo slike napravljene na prozirnoj pozadini u PNG format ili GIF.

Učinite bijelu pozadinu slike prozirnom ili napravite prozirnu pozadinu za pojedinačne fragmente slike u boji ili fotografije u Photoshopu. Nakon toga ih možete koristiti gdje je potrebno: zalijepiti ih na web mjesto, dodati na drugu sliku ili napraviti zanimljive kolaže.

Transparentnost CSS pozadine

Transparentnost pozadine na web mjestu stvara se pomoću CSS svojstava. Postoje dva načina za postizanje transparentnosti: kroz svojstvo opacity i background:rgba(). Pogledajmo svaki od njih, a zatim napravimo usporedbu.

1. Svojstvo neprozirnosti CSS-a za prozirnost pozadine

CSS ima svojstvo neprozirnosti s kojim možete postaviti prozirnost slika, teksta, uključujući pozadinu.

Postavka transparentnosti postavlja se jednostavnim određivanjem pravi broj od 0,0 do 1,0. Što je manji broj, objekt će biti manje vidljiv.

neprozirnost: 0,5 // neprozirnost translucencije: 0,2; // Objekt je vidljiv samo na 20% neprozirnosti: 0.8; // Objekt je vidljiv samo 80%.

Pogledajmo primjer sa svojstvom neprozirnosti.

Tekst je također transparentan