Ozadje preglednosti CSS. Prozorno ozadje ali besedilo, ki uporablja CSS

S prihodom CSS3 je delo oblikovalcev oblikovanja postalo veliko preprostejše in bolj logično: zdaj je mogoče res prožno konfigurirati objekt, še bolj redko uporabljate jаvascript. Recimo, da morate prilagoditi preglednost ozadja - CSS takoj ponuja več možnosti.

Ozadje je določeno z nizom atributov (ozadje-slika, ozadje-položaj, velikost ozadja, ponovitev ozadja, priloga v ozadju, izvorno ozadje, ozadje, barva ozadja), in vsak od njih je lahko napisan ločeno ali kombiniran pod atributom ozadja. Analiziramo vsako izmed njih podrobneje.

Atribut barve ozadja

V CSS barva ozadja lahko določite na več načinov: z uporabo šestnajstiške kode, barvnega imena ali zapisa RGB. V CSS3 je bilo mogoče uporabiti možnost RGBA namesto RGB zapisa.

Šestnajstišna barvna koda je zapisana v objektu po omrežju: barva ozadja: # FFDAB9. Če se znaki v takem zapisu ujemajo v parih, je koda običajno rahlo skrajšana: # ccff00 se lahko zapiše kot # cf0:

telo {background-color: # cf0-}.

Ime je celo v najbolj eksotičnih cvetovih. Na primer, poleg standardne rdeče-bele barve lahko uporabite NavajoWhite (#FFDEAD) ali Honeydew2 (# E0EEE0):

telo {background-color: purple-}.

Zadnja različica zapisa RGB ali RGBA vam omogoča, da določite ne samo barvo, temveč tudi preglednost ozadja CSS, vendar metoda deluje v IE le nad različico 9. Drugi brskalniki običajno prepoznajo možnost s preglednostjo. S standardi W3C je bolje uporabiti RGBA namesto običajnejšega RGB.

Zadnja vrednost za RGBA in nastavi motnost ozadja od 0 (transparentno) do 1 (neprozorno).

Obstaja nekaj nenavadnih vrednosti. Barva ozadja se lahko nastavi s pomočjo HSL in HSLA. Oba sta bila dodana CSS3, in zato jih različici IE 9 ali več ne podpira. Izvedbeni enaka RGB ali RGBA, le v drugačni obliki: Hue (odtenek - vrednost na barvnem kolesu, je podan v stopinjah), nasičena (nasičenost - Intenzivnost barve v odstotkih, od 0 do 100), lahkost (lahkotnost - svetlost, merjeno podobno parameter nasičenost ).

Atribut ozadja-slike

Najbolj navzkrižna različica preglednega ozadja je uporaba slike. V CSS3 lahko določite celo nekaj slik, to storite z vejico. Primer:

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

Ta metoda podpira tudi IE8. Več slik kot ozadje se uporablja za gumo. Glavna stvar, ne pozabite, kadar uporabljate katero koli podobo, tudi nastavite barvo ozadja v CSS, ker si uporabniki preprosto ne morejo zagnati slike.

Atribut položaja ozadja

Če uporabite sliko, da določite ozadje bloka, vam bo CSS omogočil, da sliko postavite kjerkoli na zaslonu. Privzeto je slika v zgornjem levem kotu. Atribut upošteva besedna navodila (zgoraj, spodaj, levo, desno) ali številčno (odstotki, piksli in druge merske enote). V tem primeru morate določiti dve vrednosti: vodoravno in navpično:

body {background-position: right center-} - v tem primeru se ozadje nahaja na desni strani strani, pri čemer je spodnja in zgornja razdalja do slike enaka.

Atribut velikosti ozadja

Včasih želite uporabiti CSS za razširitev ozadja ali zmanjšanje njegove velikosti. To naredite tako, da uporabite velikost ozadja atributa, velikost ozadja pa lahko podate v pikih ali odstotkih ter v drugih merskih enotah.

S tem atributom je nekaj težav: za pravilno prikazovanje ozadja v zgodnjih različicah brskalnikov je treba uporabiti predpone. Seveda trenutne različice popolnoma podpirajo ta atribut in potreba po posebnih lastnostih je izginila.

Atribut ozadja - priloga

Ta atribut določa obnašanje slike v ozadju pri pomiku. Torej lahko traja 3 vrednosti (brez upoštevanja dedovanja, skupnega vsem atributom, predstavljenim v tem članku):

• določen - naredi sliko proti mirnemu ozadju;
• pomaknite se - ozadje se pomika skupaj z ostalimi elementi;
• lokalno - slika na ozadju se pomika, če ima drsenje vsebino. Ozadje, ki presega vsebino, je fiksno.

Primer uporabe:

telo {background-attachment fixed}.

Trenutno Firefox ne podpira zadnje lastnosti (lokalno).

Atribut ozadja

Ta atribut je odgovoren za pozicioniranje elementa. Brskalniki zgodnjih različic zahtevajo uporabo predpon. Sama lastnost ima tri parametre:

• polnilo postavlja ozadje glede na rob, pri čemer upošteva debelino okvira;
• border-box se razlikuje od prejšnjega premoženja, saj lahko mejna črta popolnoma ali delno pokriva ozadje;
• vsebinsko polje postavite sliko in jo prislonite na vsebino.

Če je določeno več vrednosti, se lahko brskalniki odzovejo na svoj način: Firefox in Opera zaznavata samo prvo možnost.

Atribut ponovitve ozadja

Praviloma, če je ozadje podano s sliko, ga je treba ponoviti vodoravno ali navpično. Za to se uporablja atribut ozadje-ponovitev. Torej, ozadje bloka, katerega CSS vsebuje takšno lastnost, ima lahko enega od več parametrov:

• ne ponovite - slika se pojavi na eni strani v eni različici;
• ponovite - ozadje se ponovi vzdolž osi x in y;
• ponovite-x - samo vodoravno;
• ponovi-y - samo navpično;
• prostor - ozadje se ponovi, če pa prostora ni mogoče napolniti, se med slikami pojavijo slike;
• okrogla - Sliko se pomanjša, če ne morete dobiti celotnega območja, napolnjenega s celimi slikami.

Primer uporabe atributa:

body {background-repeat: ponovitev ponovitve} - podobno ponovitev ozadja: ponovitev-y.

V CSS3 je mogoče določiti vrednosti za več slik, če parametre vnesete z vejico.

Atribut ozadja

Ta atribut definira obnašanje ozadja pod mejami (na primer pri pikčastih okvirjih):

• polnilo - ozadje je prikazano izključno v bloku;
• border-box - podoba je pod okvirjem;
• vsebinsko polje - slika na ozadju se pojavi le znotraj vsebine.

Primer uporabe:

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

Za Chrom in Safari je potrebna predpona -webkit.

Atribut neprosojnosti in filtra

Atribut opacity vam omogoča, da nastavite preglednost ozadja - lastnost CSS bo delovala v vseh brskalnikih. Vrednost je nastavljena od 0.0 do vključno 1.0. Pri tem lahko nastavite CSS prosojnost brez celostne vrednosti: namesto 0,3, je dovolj, da napišete .3:

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

Če želite nastaviti prosojnost v ozadju, katerega CSS je primeren celo za IE pod deveto različico, uporabite atribut filtrov:

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

V tem primeru se motnost nastavljena vrednost med 0 in 100. Upoštevajte, da motnost pripisujejo različne nastavitve preglednosti prek RGBA dediščine: pri uporabi motnosti postane jasno, ne samo ozadje, pa tudi vsi elementi znotraj enote.

Vedno upoštevajte statistične podatke o uporabi brskalnikov v CIS in vseh drugih državah. Največja težava za vse oblikovalce postavitev je stara različica IE-ja, ne dovoljujejo vam, da v celoti izkoristite CSS3. Pri izdelavi postavitve ne pozabite uporabiti posebnih storitev, ki preverjajo, ali vaš brskalnik podpira katero koli lastnost CSS. Če ne morete namestiti starejših različic brskalnikov, poiščite storitev, ki bo testirala delovanje spletnega mesta v različnih brskalnikih v spletu.