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

S dolaskom CSS3 web dizajnera raditi na mnogo načina postalo je jednostavnije i logičnije: nakon svega, sada možete zaista fleksibilno prilagoditi bilo koji objekt, rjeđe posezanja za jаvascript. Recimo da trebate prilagoditi transparentnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina je određena skupom atributa (Pozadina slike, pozadina-položaju, pozadina veličine, pozadina ponavljanja, pozadini vezanje, pozadini podrijetla, pozadina-spojnice, pozadine-boja), i svaki od njih može se napisati zasebno ili kombinirati pod pozadinskim atributom. Razmotrimo svaki od njih detaljnije.

Atribut pozadinske boje

U CSS-u boja 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.

Hexadecimalni kod boje napisan je u svojstvu 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 standardni crveni i bijeli možete koristiti NavajoWhite (#FFDEAD) ili Honeydew2 (# E0EEE0):

tijelo {background-color: purple-}.

Posljednja verzija RGB ili RGBA zapisa omogućuje vam da odredite ne samo boju, nego 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 odrediti čak i nekoliko slika, to se postiže zarezom. primjer:

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

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

Atribut pozadinske pozicije

Ako koristite sliku za određivanje pozadine bloka, CSS će vam omogućiti postavljanje slike bilo gdje na zaslonu. Prema zadanim postavkama, slika se nalazi u gornjem lijevom kutu. Atribut traje verbalne upute (gornji, donji, lijevi, desni) ili numerički (postotci, pikseli i druge mjerne jedinice). U tom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

tijelo {pozadina: pravo središte} - u ovom primjeru, pozadina će biti smještena na desnoj strani stranice, pri čemu je dno i vrh udaljenosti od slike isti.

Atribut pozadinske veličine

Ponekad želite koristiti CSS kako biste se protezali ili smanjili njegovu veličinu. Da biste to učinili, upotrijebite pozadinsku veličinu atributa, a veličina pozadine može se odrediti u pikselima ili postotcima i na svim drugim mjernim jedinicama.

Uz ovaj atribut postoje neki problemi: za ispravno prikazivanje pozadine u ranijim verzijama preglednika potrebno je koristiti prefikse. Naravno, trenutne verzije u potpunosti podržavaju ovaj atribut i nestala je potreba za određenim svojstvima.

Atribut pozadine

Ovaj atribut određuje ponašanje pozadinske slike prilikom pomicanja. Dakle, može se uzeti 3 vrijednosti (ne uzimajući u obzir naslijeđe, zajedničko svim atributima prikazanim u ovom članku):

• fiksni - slika na nepomičnoj pozadini;
• svitak - pozadina se pomiče zajedno s ostalim elementima;
• lokalne - slika na pozadini se pomiče ako kretanje ima sadržaj. Pozadina koja nadilazi sadržaj je fiksna.

Primjer korištenja:

tijelo {background-attachment fixed}.

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

Atribut pozadinskog porijekla

Ovaj je atribut odgovoran za pozicioniranje elementa. Preglednici ranijih inačica zahtijevaju upotrebu prefiksa. Imovina sama ima tri parametra:

• padding-box pozicionira pozadinu s obzirom na rub, uzimajući u obzir debljinu okvira;
• border-box razlikuje se od prethodnog svojstva po tome što granična linija može potpuno ili djelomično prekriti pozadinu;
• sadržaj kutija postavite sliku, postavljajući ga na sadržaj.

Ako su navedene više vrijednosti, preglednici mogu reagirati na svoj način: Firefox i Opera primjećuju samo prvu opciju.

Atribut pozadinskog ponavljanja

U pravilu, ako je pozadina određena slikom, mora se ponavljati vodoravno ili okomito. Za to se koristi atribut pozadine ponavljanja. Dakle, pozadina bloka čiji CSS sadrži takav entitet može imati jedan od nekoliko parametara:

• bez ponavljanja - slika se pojavljuje na stranici u jednoj varijanti;
• ponoviti - pozadina se ponavlja duž osi x i y;
• ponoviti-x - samo vodoravno;
• ponovi-y - samo okomito;
• prostor - pozadina se ponavlja, ali ako se prostor ne može ispuniti, slike se pojavljuju između slika;
• oko - Slika je skalirana ako ne možete dobiti cijelo područje ispunjeno cijelim slikama.

Primjer upotrebe atributa:

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

U CSS3, moguće je odrediti vrijednosti za nekoliko slika, ako parametre navedete pomoću zarezom.

Atribut pozadine-isječak

Ovaj atribut definira pozadinsko ponašanje ispod granica (na primjer, u slučaju točkastih okvira):

• padding-box - pozadina se prikazuje strogo unutar bloka;
• border-box slika dolazi ispod okvira;
• sadržaj kutija - slika na pozadini pojavljuje se samo unutar sadržaja.

Primjer korištenja:

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

Chrom i Safari zahtijevaju upotrebu -webkit-prefiksa.

Nepravilnosti i svojstva filtra

Atribut neprozirnosti omogućuje postavljanje transparentnosti pozadine - CSS imovina će raditi u svim preglednicima. Vrijednost je postavljena od 0,0 do 1,0 uklj. Na taj način možete postaviti CSS pozadinsku transparentnost bez cjelobrojne vrijednosti: umjesto 0,3, dovoljno je napisati .3:

.blok {background-image: url (img.jpg) - neprozirnost: .3-}.

Da biste postavili prozirnu pozadinu, čiji je CSS prikladan čak i za IE ispod devete verzije, upotrijebite atribut filtra:

.blok {background-image: url (img.jpg) - filtar: alfa (opacity = 30) -}.

U tom slučaju, neprozirnost vrijednost je postavljena između 0 i 100. Imajte na umu da neprozirnost pripisuju različite postavke transparentnosti putem RGBA baštinu kada koristite neprozirnost postaje jasno ne samo da je u pozadini, ali i svi elementi unutar jedinice.

Uvijek slijedite statistiku korištenja preglednika u CIS-u i svim ostalim zemljama. Najveći problem za sve proizvođače izgleda je stara verzija IE, ne dopuštaju vam da koristite CSS3 u najvećoj mogućoj mjeri. Prilikom izrade izgleda nemojte zaboraviti 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 će testirati rad web stranice u različitim preglednicima na mreži.