CSS Pozadinska prozirnost. Prozirna pozadina ili tekst pomoću CSS-a

S pojavom CSS3, rad dizajnerica rasporeda u mnogočemupostao je jednostavniji i logičniji: u stvari, sada je moguće fleksibilno postaviti objekt, a sve rjeđe se pribjegava JavaScriptu. Recimo da trebate prilagoditi transparentnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina je postavljena skupom atributa (background-image,Pozadina pozadine, pozadina veličine, pozadina ponoviti, pozadina privitak, pozadina-podrijetlo, pozadina-isječak, background-color), od kojih se svaka može zasebno registrirati ili kombinirati pod pozadinskim atributom. Razmotrimo svaki od njih detaljnije.

Atribut pozadinske boje

U CSS-u boju pozadine možete odrediti na nekoliko načina: pomoću heksadecimalnog koda, naziva boje ili RGB zapisa. U CSS3 postalo je moguće koristiti RGBA opciju umjesto RGB zapisa.

Heksadecimalni kôd boja je napisan uimovina nakon rešetke: background-color: # FFDAB9. Ako se znakovi u takvom zapisu uspoređuju u parovima, kod se obično malo skrati: # ccff00 se može napisati kao # cf0:

tijelo {background-color: # cf0;}.

Ime je čak i najizotropnije cvijeće. Na primjer, uz standardno crveno i bijelo, možete koristiti NavajoWhite (#FFDEAD) ili Honeydew2 (# E0EEE0):

tijelo {background-color: purple;}.

Posljednja verzija RGB ili RGBA snimanja omogućujepostaviti ne samo boju, ali i transparentnost CSS pozadine, ali metoda radi u IE samo preko inačice 9. Drugi preglednici obično prepoznaju opciju s transparentnošću. Prema W3C standardima, poželjno je koristiti RGBA umjesto uobičajenog RGB.

Zadnja vrijednost za RGBA i postavljanje neprozirnosti pozadine od 0 (prozirno) do 1 (neprozirno).

Postoje neka neobična značenja. Boja pozadine može se postaviti s HSL i HSLA. Obje su dodane u CSS3, pa stoga IE nije podržan ispod verzije 9. Izvedbe identičan RGB ili RGBA samo u drugom obliku: Nijansa (nijansu - vrijednost na kotaču boja, dan je u stupnjevima), zasititi (zasićenje - intenzitet boje kao postotak, od 0 do 100), lakoća (lakoća - svjetlost, mjereno na sličan parametar zasititi ).

Atribut pozadinske slike

Većina cross-browser verzija transparentne pozadine je korištenje slike. U CSS3, možete čak odrediti više slika, to je učinjeno odvojeno zarezima. primjer:

tijelo {background-image: url (bg1.png), url (bg2.png)}.

Ova metoda čak i podržava IE8. Nekoliko slika kao pozadine koristi se za izgled gume. Glavna stvar, nemojte zaboraviti, kada koristite bilo koju sliku, također postaviti boju pozadine u CSS, jer korisnici jednostavno ne mogu učitati sliku.

Atribut pozadinskog položaja

Ako koristite sliku za postavljanje pozadineblok, CSS će vam omogućiti postavljanje slike bilo gdje na zaslonu. Prema zadanim postavkama, slika se nalazi u gornjem lijevom kutu. Atribut prihvaća verbalne upute (gornji, donji, lijevi, desni) ili numerički (postotci, pikseli i druge mjerne jedinice). Potrebno je navesti dvije vrijednosti: vodoravno i okomito:

tijelo {pozadina: desno mjesto;} - u ovom primjeru, pozadina će se nalaziti na desnoj strani stranice, pri čemu su udaljenosti prema slici ispod i iznad.

Atribut pozadine

Ponekad želite proširiti pozadinu pomoću CSS ilismanjiti njegovu veličinu. Da biste to učinili, upotrijebite atribut pozadinske veličine, a veličina pozadine može se odrediti u pikselima ili postocima te u svim drugim mjernim jedinicama.

Postoje neki problemi s ovim atributom: Da biste ispravno prikazali pozadinu u starijim verzijama preglednika, morate upotrijebiti prefikse. Naravno, trenutne verzije u potpunosti podržavaju ovaj atribut i nestala je potreba za određenim svojstvima.

Atribut pozadine

Ovaj atribut postavlja ponašanje pozadinske slike prilikom pomicanja. Dakle, može uzeti 3 vrijednosti (bez razmatranja nasljeđivanja, što je zajedničko svim atributima prikazanim u ovom članku):

• fiksni - čini sliku na pozadini;
• svitak - pozadina se pomiče zajedno s ostalim elementima;
• lokalne - Slika na pozadini pomiče ako je pomicanje sadržano. Zabilježena je pozadina koja nadilazi sadržaj.

Primjer upotrebe:

tijelo {background-attachment fixed}.

Trenutačno Firefox ne podržava zadnji entitet (lokalno).

Atribut pozadinskog porijekla

Ovaj je atribut odgovoran za pozicioniranje elementa. Prethodni preglednici zahtijevaju upotrebu prefiksa. Imovina sama ima tri parametra:

• padding-box pozicioniranje pozadine u odnosu na rub, uzimajući u obzir debljinu okvira;
• border-box razlikuje se od prethodnog svojstva u tome što granična crta može potpuno ili djelimično preklapati pozadinu;
• okvir za sadržaj pozicioniranje slike, pridržavajući ga sadržaju.

Ako je postavljeno više vrijednosti, preglednici mogu reagirati na svoj način: Firefox i Opera prihvaćaju samo prvu opciju.

Atribut pozadinskog ponavljanja

U pravilu, ako je pozadina postavljena na slici, to jetrebalo bi ponoviti vodoravno ili okomito. To je ono što se koristi za pozadinsko ponavljanje atributa. Dakle, blokna pozadina, čiji CSS sadrži takav entitet, može imati jedan od nekoliko parametara:

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

Primjer upotrebe značajke:

tijelo {pozadina ponoviti: ne ponoviti ponoviti} - slično ponavljanje pozadine: ponovite y.

U CSS3, moguće je postaviti vrijednosti za nekoliko slika unosom parametara odvojenih zarezima.

Atribut pozadinskog isječka

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

• padding-box - pozadina se prikazuje strogo unutar bloka;
• border-box slika dolazi ispod okvira;
• okvir za sadržaj - Slika u pozadini prikazuje se samo unutar sadržaja.

Primjer upotrebe:

tijelo {background-clip: content-box;}.

Chrom i Safari zahtijevaju upotrebu -webkit-prefiksa.

Dodjeljuje neprozirnost i filtriranje

Atribut neprozirnosti omogućuje postavljanje transparentnostiPozadina - CSS svojstvo funkcionira u svim preglednicima. Vrijednost je postavljena između 0,0 i 1,0. Time možete postaviti transparentnost pozadinskog CSS-a bez cijele vrijednosti: umjesto 0,3 dovoljno je pisati .3:

.block {background-image: url (img.png); neprozirnost: .3;}.

Da biste postavili transparentnost pozadine, čiji je CSS prikladan i za IE ispod devete verzije, upotrijebite atribut filtra:

.block {background-image: url (img.png); filtar: alfa (neprozirnost = 30);}.

U tom je slučaju vrijednost neprozirnosti postavljena naograničava se od 0 do 100. Imajte na umu da se atribut neprozirnosti razlikuju od postavke transparentnosti pomoću RGBA u nasljeđu: kada koristite neprozirnost, ne samo da pozadina postaje prozirna, već su svi elementi unutar bloka transparentni.

Uvijek pratite statistike upotrebe.preglednika u CIS-u i svim ostalim zemljama. Najveći problem svih dizajnera je stara verzija IE, oni ne dopuštaju punu uporabu CSS3. Prilikom izrade, ne zaboravite koristiti posebne usluge koje provjeravaju podržava li vaš preglednik bilo koji CSS svojstvo. Ako ne možete instalirati starije verzije preglednika, potražite uslugu koja provjerava rad web mjesta u različitim preglednicima na mreži.