Kako postaviti prozirnost pozadinske slike u CSS-u? Transparentnost CSS pozadine. Prozirna pozadina ili tekst sa CSS sivom prozirnom pozadinom

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 poseban članak. U istom sam vam htio reći kako postaviti prozirnost za svojstvo pozadine u css-u.

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 s grafičkim urednicima, onda vjerojatno znate da se rgb način boja dekodira na sljedeći način: udio crvene (crvene), udio zelene (zelene) i plave (plave). Dakle, rgba je gotovo ista, samo je dodan još jedan parametar - transparentnost. Napisano je ovako:

Boja pozadine: rgba(173, 57, 22, 0.5)

Prvo, eksplicitno označavamo da boju postavljamo u rgba modu. Zatim označavamo vrijednosti zasićenosti tri primarne boje od 0 do 255, gdje je 255 najveća zasićenost. Četvrti parametar je naša transparentnost. Ovdje je vrijednost zapisana 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 transparentnost za svojstvo pozadine 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. Odnosno, kada se primjenjuje neprozirnost, prozirnost se također može primijeniti na tekst, što će ga učiniti 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:

A sada postavimo istu crnu boju za blok, ali je odredimo pomoću rgba formata boja, navodeći posljednju vrijednost kao 0,7, na primjer. Ispast će ovako:
Sada je pozadina bloka prozirna i kroz nju se vidi pozadinska slika. Ova slika i pozadina služe samo za ilustraciju. Kao što razumijete, prozirnost pozadine u css-u može biti korisna kada vam je potrebna pozadina ugniježđenog elementa da se vidi bez zaklanjanja drugih pozadina smještenih u drugim slojevima.

Samu boju nije teško postaviti 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 milijune različitih boja, a prozirnost će vam omogućiti da, ako je potrebno, smislite puno lijepih efekata za web mjesto.

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. Imam instaliranu englesku verziju Adobe Photoshop CS5, pa ću je pokazati na njoj.

Pokušat ću dati razne kombinacije vrućih tipki.

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 na običnoj pozadini, 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. Slike napravljene na prozirnoj pozadini spremamo u PNG ili GIF formatu.

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.

Transparentnost se navodi jednostavno određivanjem realnog broja između 0,0 i 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



2. Transparentnost putem CSS svojstva background:rgba()

Druga opcija za postavljanje prozirnosti pozadine na web mjestu je CSS svojstvo background:rgba. Razmotrite primjer

Tekst je također transparentan



Ovaj kod na stranici prevodi sljedeće:

Razlika između ove dvije metode je u tome što tekst unutar bloka postaje proziran kada se koristi neprozirnost.

U drugom slučaju nema tog problema. Stoga morate već sada sagledati situaciju - što točno čekate.

CSS transparentnost - cross-browser rješenje - 3.8 od 5 na temelju 6 glasova

U ovom tutorialu ćemo pogledati transparentnost CSS-a, naučiti kako različite elemente stranice učiniti transparentnima i postići potpuni cross-browser, tj. isti učinak ovog efekta u različitim preglednicima.

Kako postaviti prozirnost bilo kojeg elementa

U CSS3, svojstvo opacity odgovorno je za stvaranje transparentnih elemenata, koji se mogu primijeniti na bilo koji element. Ovo svojstvo ima vrijednosti od 0 do 1, koje određuju stupanj prozirnosti. Gdje je 0 potpuno proziran (zadana vrijednost za sve elemente), a 1 je potpuno neproziran. Vrijednosti se pišu kao razlomci: 0,1, 0,2, 0,3 itd.

Primjer upotrebe:

Transparentnost



Transparentnost među preglednicima

Ne percipiraju i implementiraju svi preglednici gornje svojstvo neprozirnosti na isti način. U nekim slučajevima potrebno je koristiti različito ime svojstva ili filtre.

Svojstvo neprozirnosti CSS3 podržavaju sljedeći preglednici Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Tako dobro :) Preglednik poput Internet Explorera do verzije 9.0 ne podržava svojstvo neprozirnosti i za stvaranje prozirnosti za ovaj preglednik trebate koristiti svojstvo filtra i vrijednost alpha(Opacity=X) gdje je X cijeli broj između 0 i 100 koji određuje razina transparentnosti. 0 je potpuna prozirnost, a 100 potpuna neprozirnost.

Od Firefoxa prije verzije 3.5, podržava svojstvo -moz-opacity umjesto neprozirnosti.

Preglednici kao što su Safari 1.1 i Konqueror 3.1, izgrađeni na KHTML stroju, koriste svojstvo -khtml-opacity za kontrolu transparentnosti.

Kako postaviti prozirnost u CSS-u tako da izgleda isto u svim preglednicima? Kako bi stvorili rješenje za transparentnost elemenata u više preglednika, potrebno je registrirati ne samo jedno svojstvo neprozirnosti, već sljedeći skup svojstava:

filtar: alfa (neprozirnost=50); /* Transparentnost za IE */ -moz-opacity: 0.5; /* Podrška za Mozillu 3.5 i niže */ -khtml-opacity: 0.5; /* Podrška za Konqueror 3.1 i Safari 1.1 */ neprozirnost: 0.5; /* Podrška za sve ostale preglednike */

Prozirnost raznih elemenata

Pogledajmo neke primjere postavljanja transparentnosti za pojedine elemente koji se najčešće koriste na stranici.

CSS transparentnost slike.

Razmotrite nekoliko opcija za stvaranje prozirne slike. U sljedećem primjeru prva slika nema prozirnost, druga ima 50% prozirnost, a treća 30%.

Transparentnost



Proizlaziti:

Transparentnost u CSS-u kada lebdite iznad slike.

Često je potrebno učiniti sliku ili bilo koji drugi element transparentnim u trenutku kada se pokazivač nalazi iznad njega. To se može učiniti pomoću :hover CSS pseudo-klase. Da bismo to učinili, naša slika mora registrirati dvije klase, jednu običnu - to će biti neaktivno stanje slike i drugu klasu s pseudo-klasom: lebdite, ovdje morate odrediti prozirnost slike u trenutku lebdeći kursorom.

Transparentnost



Rezultat možete vidjeti u demo snimci.

Transparentnost CSS pozadine

Ovdje morate zapamtiti da se transparentnost odnosi na sve ugniježđene elemente i oni ne mogu imati veću transparentnost od ugniježđenog elementa.

Kao primjer, navedimo varijantu s pozadinom stranice stvorenom pomoću slike i blokom s pozadinom izrađenom pomoću boje i prozirnosti od 50%.

Primjer koda:

Transparentnost

Tekst


Ovo je rezultat gornjeg koda:

S dolaskom CSS3, rad dizajnera izgleda postao je mnogo jednostavniji i logičniji: nakon svega, sada stvarno možete fleksibilno konfigurirati bilo koji objekt, sve rjeđe pribjegavajući JavaScriptu. Recimo da trebate prilagoditi prozirnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina je navedena skupom atributa, pozadinsko ponavljanje, pozadinsko privitak, pozadinsko porijeklo, pozadinski isječak, pozadinska boja), a svaki od njih može se navesti zasebno ili kombinirati pod atributom pozadine. Analizirajmo svaki od njih detaljnije.

atribut boje pozadine

Čak i IE8 podržava ovu metodu. Nekoliko slika kao pozadine koristi se u fluidnom rasporedu. Ono što je najvažnije, kada koristite bilo koju sliku, također postavite boju pozadine u CSS-u, jer korisnici jednostavno neće učitati sliku.

atribut položaja pozadine

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 indikacije (gore, dolje, lijevo, desno) ili numeričke indikacije (postoci, pikseli i druge mjerne jedinice). U ovom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

body (background-position: right center;) - u ovom primjeru, pozadina će se nalaziti na desnoj strani stranice, a donja i gornja udaljenost od slike su iste.

atribut veličine pozadine

Ponekad želite rastegnuti pozadinu ili smanjiti njezinu veličinu pomoću CSS-a. Da biste to učinili, upotrijebite atribut veličine pozadine, a veličina pozadine može se postaviti u pikselima ili postocima, kao iu bilo kojoj drugoj mjernoj jedinici.

Postoje neki problemi s ovim atributom: kako bi se ispravno prikazala pozadina u ranijim verzijama preglednika, moraju se koristiti prefiksi. Naravno, trenutne verzije u potpunosti podržavaju ovaj atribut i potreba za određenim svojstvima je nestala.

background-attachment atribut

Ovaj atribut određuje ponašanje pozadinske slike prilikom pomicanja. Dakle, može uzeti 3 vrijednosti (ne uzimajući u obzir nasljeđivanje, što je zajedničko za sve atribute predstavljene u ovom članku):

Primjer upotrebe:

tijelo (pozadina-prilog fiksan).

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

atribut podrijetla pozadine

Ovaj atribut je odgovoran za pozicioniranje elementa. Rani preglednici zahtijevaju upotrebu prefiksa. Sama nekretnina ima tri parametra:

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

atribut ponavljanja pozadine

Općenito, ako je pozadina postavljena na sliku, treba je ponoviti vodoravno ili okomito. Tome služi atribut pozadinskog ponavljanja. Na primjer, pozadina bloka čiji CSS sadrži takvo svojstvo može imati jednu od nekoliko opcija:

Primjer korištenja atributa:

tijelo (pozadinsko ponavljanje: ponavljanje bez ponavljanja)- slično pozadinsko ponavljanje: ponavljanje-y.

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

atribut pozadinskog isječka

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

Primjer upotrebe:

tijelo (background-clip: content-box;).

Chrom i Safari zahtijevaju upotrebu prefiksa -webkit-.

neprozirnosti i filterskih atributa

Atribut neprozirnosti omogućuje postavljanje prozirnosti pozadine - svojstvo CSS radit će u svim preglednicima. Vrijednost je postavljena između 0,0 i uključivo 1,0. U ovom slučaju možete postaviti prozirnost pozadine CSS-a bez vrijednosti cijelog broja: umjesto 0.3 samo napišite .3:

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

Za postavljanje prozirnosti pozadine, čiji je CSS prikladan čak i za IE ispod devete verzije, koristite atribut filtera:

.block (pozadinska slika: url(img.png); filter: alpha(opacity=30);).

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

Uvijek pratite statistiku korištenja preglednika za CIS i sve ostale zemlje. Najveći problem za sve dizajnere izgleda su stare verzije IE-a, one vam ne dopuštaju korištenje CSS3 u potpunosti. Prilikom postavljanja 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 testirati stranicu u različitim internetskim preglednicima.

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.

Transparentnost se navodi jednostavno određivanjem realnog broja između 0,0 i 1,0. Što je manji broj, objekt će biti manje vidljiv.

neprozirnost: 0,5 // Prozirnost neprozirnost: 0,2 // Objekt je vidljiv samo 20%. neprozirnost: 0,8 // Objekt je vidljiv samo 80%.

Pogledajmo primjer sa svojstvom neprozirnosti.

Tekst je također transparentan

Ovaj kod na stranici prevodi sljedeće:

Tekst je također transparentan

2. Transparentnost putem CSS svojstva background:rgba()

Druga opcija za postavljanje prozirnosti pozadine na web mjestu je CSS svojstvo background:rgba. Razmotrite primjer

Tekst je također transparentan

Ovaj kod na stranici se prevodi na sljedeće.

Slični postovi