Transparentnost pozadine CSS. Prozirna pozadina ili tekst sa CSS

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 JavaScript. Recimo da je potrebno podesiti transparentnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina definiran sa skupom atributa (pozadini slikovne pozadine-položaju , pozadina veličine, pozadini ponoviti, pozadini pričvršćenja, pozadina podrijetla, pozadina-clip, pozadini boje), od kojih svaki može biti dodijeljeni odvojeno ili u kombinaciji u atribut pozadine. Neka nas ispitati svaki od njih u detalje.

Atribut background-color

U CSS, boja pozadine se može postaviti na nekoliko načina: pomoću hex kod, naziv boji ili RGB ulaz. U CSS3 postalo je moguće koristiti umjesto opciju RGB snimanje sa RGBA.

Hex kod boje je upisana u imovinu nakon rešetke: background-color: # FFDAB9. Ako likovi u ovaj unos su isti parova, kod je obično malo rez: # ccff00 može biti napisan kao # cf0:

Tijelo {background-color: # cf0 ;}.

Ime je, čak iu većini egzotične boje. Na primjer, uz standardni crveni i bijeli možete koristiti NavajoWhite (#FFDEAD) ili Honeydew2 (# E0EEE0):

Tijelo {background boja: ljubičasta; }.

Druga opcija je RGB ili unos RGBA omogućuje određivanje ne samo boju, ali i transparentnost CSS pozadini, ali metoda radi samo u IE verzije starije od 9. Ostali preglednici prepoznaju normalnu verziju transparentno. Prema W3C standardima poželjno je koristiti i dalje RGBA umjesto uobičajenom RGB.

Posljednja vrijednost RGBA pozadini i postavlja neprozirnosti od 0 (prozirna) do 1 (neproziran).

Postoje neke neobične vrijednosti. Boja pozadine se može podesiti pomoću HSL i HSLA. Oba su dodani CSS3, i stoga ne podržava IE verzija 9 ili noviji. 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 ).

Pripisuju se pozadinska slika

Najviše cross-preglednik verzija prozirnom pozadinom - to je korištenje slike. U CSS3, možete postaviti još više slika, to je učinjeno kroz zarezom. primjer:

{Background tijela slika: URL (bg1.png), URL (bg2.png)}.

Na taj način podupiranja i IE8. Nekoliko slika u pozadini gume se koriste u izgledu. Važno je, ne zaboravite da koristite bilo koju sliku i postaviti boju pozadine u CSS, kao korisnici mogu jednostavno prenijeti sliku.

Atribut pozadinska položaju

Ako koristite sliku postaviti pozadinsku jedinicu, CSS vam omogućuje da postavite sliku bilo gdje na zaslonu. Prema zadanim postavkama, slika se nalazi u gornjem lijevom kutu. Osobina uzima bilo verbalne upute (gore, dolje, lijevo, desno), numerički (kamate, piksela i druge jedinice). U tom slučaju, morate navesti dvije vrijednosti horizontalne i vertikalne:

body {background-pozicija: desni centar ;} - u ovom primjeru, uzorak će biti smješten na desnoj strani stranice, na vrhu i na dnu udaljenosti slike na isto.

Atribut background veličini

Ponekad je potrebno da se protežu CSS pozadinu ili smanjiti njezinu veličinu. Da biste to učinili, koristite atribut background-veličinu i veličinu pozadine može se postaviti u pikselima ili postocima, i bilo koje druge jedinice.

Uz ovaj atribut, postoje neki problemi: za ispravan prikaz iskustvom u ranijim verzijama prefiksa preglednika koji će se koristiti. Naravno, trenutna verzija u potpunosti podržava ovo svojstvo, a potreba za specifičnim svojstvima nestala.

Atribut pozadinska vezanje

Ovaj atribut određuje ponašanje pozadini slike prilikom pomicanja. Dakle, to može potrajati 3 vrijednosti (ne uključujući naslijediti, ukupno za sve od atributa kojima se raspravlja u ovom članku):

• fiksna - čini se slika na pozadini fiksna;
• dođite - pozadina svitaka s ostatkom elemenata;
• lokalna - slika na pozadini se pomicati ako pomicanje ima sadržaj. Pozadina koja nadilazi sadržaj okvira je fiksna.

Primjer korištenja:

Tijelo {pozadini pričvršćivanje fiksne}.

Trenutno Firefox ne podržava posljednju imovinu (lokalno).

Atribut pozadinska podrijetlo

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

• padding-okvir postavljen u odnosu na uzorak rub, a uzimajući u obzir debljinu okvira;
• granični okvir svojstva različita od prethodne, da je granična linija može biti potpuno ili djelomično preklapaju uzorak;
• sadržaj kutija pozicioniranje slike pryavyazyvaya njegov sadržaj.

Ako navedete više vrijednosti, onda preglednici mogu reagirati na svoj način: Firefox i Opera vide samo prvu opciju.

Atribut background-repeat

U pravilu, ako je pozadina slike je navedeno, mora se ponoviti vodoravno ili okomito. Za to i koristi atribut background-repeat. Dakle, blok pozadine, CSS koji sadrži takvu imovinu može imati jedan od nekoliko parametara:

• bez ponavljanja - na stranici u jednom verzijom se slika;
• Ponavljam - pozadina ponavlja u x i y;
• ponoviti-x - samo horizontalno;
• ponovi-y - samo vertikalno;
• prostor - pozadina se ponavlja, ali ako je prostor nemoguće ispuniti između slikama izgleda prazan;
• okrugli - slika je umanjena, ako ne ispunjava cijelo područje cijele slike.

Primjer atributa:

Tijelo {background-repeat: no- repeat repeat} - sličan background-repeat: repeat-y.

U CSS3 može odrediti vrijednosti za više slika prilikom uvrštenja parametre, odvojene zarezima.

Atribut background-isječak

Taj atribut određuje ponašanje pozadine pod granica (primjerice, u slučaju iscrtanih okvira):

• padding-box - pozadina prikazana u unutrašnjosti bloka;
• border-box - slika dolazi u okviru;
• sadržaj kutija - slika na pozadini će se pojaviti samo u sadržaju.

Primjer korištenja:

Tijelo {background-clip: content- kutije;}.

Chrom i Safari zahtijevaju -webkit- prefiks.

Neprozirnost atributi i filter

neprozirnost atribut omogućuje postavljanje transparentnost pozadine - CSS nekretnina će raditi u svim preglednicima. Vrijednost je postavljena u rasponu od 0.0 do 1.0 uključivo. U tom slučaju, možete podesiti transparentnost CSS pozadine ne cjelobrojna vrijednost, umjesto 0,3 je dovoljno napisati .3:

.block {background-image: URL ( img.png); Neprozirnost: .3;}.

Za postavljanje pozadinske neprozirnost, CSS je pogodna čak i za IE ispod devetoj verziji, koristite filtar atribut:

.block {background-image: URL ( img.png); Filter: alfa (neprozirnost = 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 pratiti svoje statistike o korištenju za preglednike CIS i svih drugih država. Najveći problem svih DTP - starije verzije IE, oni ne dopuštaju vam da koristite punoj mjeri CSS3. U izgledu ne zaboravite koristiti posebne usluge koje provjeriti je li vaš preglednik podržava sve CSS svojstvo. Ako ne možete instalirati starije verzije preglednika, pronaći uslugu koja će provjeriti rad stranice u više preglednika na internetu.