Pozadini transparentnost CSS. Transparentnom pozadinom ili tekst sa CSS-om

Pojavom CSS3 web dizajnera radi na mnogo načina postalo je lakše i logičnije: nakon svega, sada možete zaista fleksibilno prilagoditi bilo koji objekat, rjeđe pribjegavaju JavaScript. Recimo da je potrebno podesiti transparentnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina definisano skup atributa (u pozadini slike, pozadine-position , pozadina veličine, u pozadini, ponavljam, u pozadini, prilog, u pozadini porijekla, pozadina-clip, background-color), od kojih svaki može biti dodijeljen pojedinačno ili u kombinaciji, pod atribut pozadini. Razmotrimo svaki od njih u detalje.

Atribut background-color

U CSS, boja pozadine se može postaviti na nekoliko načina: koristeći hex kod, ime boje ili RGB-ulaska. U CSS3 postalo je moguće koristiti umjesto opciju RGB-snimanje sa RGBA.

Hex kod boja je upisana u imovinu nakon rešetki: background-color: # FFDAB9. Ako likova u ovaj unos su isti parovi, kod je obično malo rez: # ccff00 se može pisati kao # CF0:

tijelo {background-color: # CF0 ;}.

Ime je, čak iu najegzotičnijih boje. Na primjer, pored standardnih crvene i bijele možete koristiti NavajoWhite (#FFDEAD) ili Honeydew2 (# E0EEE0):

tijelo {background-color: purple; }.

Ova druga opcija je RGB ili RGBA ulazak omogućuje vam da odredite ne samo boja, nego i transparentnost CSS pozadini, ali je metoda radi samo u IE verzije starije od 9. Drugih pretraživača prepoznaju normalna verzija sa transparentnosti. Prema W3C standardima poželjno je koristiti i dalje rgba umjesto više uobičajenih RGB.

Zadnju vrijednost u RGBA pozadini i postavlja neprozirnost od 0 (transparentne) do 1 (neprozirno).

Postoje neke neobične vrijednosti. Boja pozadine se može podesiti pomoću HSL i HSLA. Obojica su dodan u CSS3, i zbog toga ne podržava IE verzija 9 ili više. Embodiments identične RGB ili RGBA, samo u drugom formatu: Hue (nijansa - vrijednost na točku boje, dat je u stupnjevima), Saturate (zasićenje - intenzitet boje kao procenat, od 0 do 100), Lakoća (lakoće - svjetline, mjereno na sličan način parametra Saturate ).

Atribut background-image

Najviše verzija cross-browser transparentne pozadine - to je upotreba slike. U CSS3, možete postaviti još više slika, to se radi kroz zarezom. primjer:

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

Na ovaj način podrške čak i IE8. Nekoliko slika u pozadini gumene koristi u izgledu. Najvažnije, ne zaboravite da koristite bilo koji slika kao što je navedeno u boji CSS pozadine, kao korisnici mogu jednostavno uploadati sliku.

Atribut background-position

Ako koristite sliku da postavite pozadinu jedinice, CSS omogućava vam da postavite sliku bilo gdje na ekranu. Po defaultu, slika se nalazi u gornjem lijevom kutu. Atribut uzima bilo verbalne instrukcije (gore, dolje, lijevo, desno), numerički (kamata, piksela i druge jedinice). U tom slučaju, morate navesti dvije vrijednosti, horizontalne i vertikalne:

tijelo {background-position: desni centar ;} - u ovom primjeru, obrazac će se nalaziti na desnoj strani stranice, vrha i dna udaljenosti sliku na isto.

Atribut background veličine

Ponekad je potrebno da se protežu CSS pozadina ili smanjiti veličinu. Da biste to učinili, koristite atribut pozadinu veličine, a veličina pozadine može se postaviti u pikselima ili procentima, i bilo koje druge jedinice.

Uz ovaj atribut, postoje neki problemi: za koji će se koristiti ispravan prikaz pozadinu u ranijim verzijama prefiksa preglednika. Naravno, trenutna verzija u potpunosti podržava ovaj atribut i nestao potrebu za specifična svojstva.

Atribut background-attachment

Ovaj atribut određuje ponašanje pozadinske slike dok se kreće. Dakle, to može potrajati 3 vrijednosti (ne uključujući Nasledi, ukupna za sve atribute govori u ovom članku):

• fiksni - čini sliku na pozadini fiksnog;
• listanje - pozadina svitaka s ostatkom elemenata;
• lokalni - slika na pozadini je pomicana ako pomicanje ima sadržaj. Pozadine koja nadilazi sadržaj okvira je fiksna.

Primjer korištenja:

tijelo {background-attachment fiksni}.

Trenutno, Firefox ne podržava posljednje imovine (lokalni).

Atribut background-porijekla

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

• padding-box je pozicioniran u odnosu na rub obrazac, a uzimajući u obzir debljinu okvira;
• granica-box svojstvima se razlikuje od prethodnih po tome što granične linije mogu biti potpuno ili djelomično preklapaju obrazac;
• Sadržaj kutije pozicioniranje slika pryavyazyvaya njegov sadržaj.

Ako ste naveli više vrijednosti, a zatim pretraživače mogu da reaguju na svoj način: Firefox i Opera doživljavaju samo prva opcija.

Atribut background-repeat

Po pravilu, ako je navedeno u pozadini slike, mora se ponoviti horizontalno ili vertikalno. Za to i koristi atribut background-repeat. Tako, blok pozadine, CSS koja sadrži takve imovine može imati jednu od nekoliko parametara:

• no-repeat - slika se pojavljuje na stranici u jednom verziji;
• Ponavljam - pozadina se ponavlja u X i Y;
• Ponavljam-x - samo horizontalno;
• Ponavljam-y - samo vertikalno;
• prostor - pozadina se ponavlja, ali ako je prostor nemoguće popuniti između slika prikazuje prazan;
• krug - slika se povećava, ako ne ispuni cijelo područje cijele slike.

Primjer atributa:

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

U CSS3 može odrediti vrijednosti za više slika kada svi parametri, odvojene zarezima.

Atribut background-klip

Ovaj atribut definira ponašanje pozadini pod granice (npr u slučaju isprekidane okvira):

• padding-box - u pozadini prikazan u unutrašnjosti bloka;
• granica-box - slika dolazi u okviru;
• Sadržaj-box - slika na pozadini će se pojaviti u okviru sadržaja.

Primjer korištenja:

tijelo {background-clip: sadržajnom kutija;}.

Chrom i Safari zahtijevaju -webkit- prefiks.

Neprozirnost atribute i filter

neprozirnost atribut vam omogućava da podesite transparentnost pozadine - CSS imovine će raditi u svim preglednicima. Vrijednost je postavljena u rasponu 0,0-1,0 inclusive. U tom slučaju, možete podesiti transparentnost CSS pozadine nema cijeli broj vrijednosti, umjesto 0,3 je dovoljno napisati .3:

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

Da biste postavili pozadinu neprozirnost, CSS je pogodna čak i za IE ispod deveti verzije, koristite filtar atribut:

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

U ovom slučaju, vrijednost neprozirnost se nalazi između 0 i 100. Imajte na umu da neprozirnost pripisuju različite postavke transparentnost preko RGBA baštine: kada se koristi providnost postaje jasno ne samo u pozadini, ali i svi elementi unutar jedinice.

Uvijek prati svoju statistiku upotrebe za CIS pretraživače i sve druge zemlje. Najveći problem svih DTP - starije verzije Internet Explorera, oni ne dozvoljavaju da koristite punoj mjeri CSS3. U raspored ne zaboravite koristiti posebne usluge koje proverite da li vaš browser podržava bilo CSS imovine. Ako ne možete instalirati stariju verziju pretraživača, pronaći uslugu koja će provjeriti radilišta u više preglednicima online.