CSS preglednost ozadje. Prosojno ozadje ali besedila s CSS

S prihodom CSS3 spletnih oblikovalcev delo v mnogih pogledih je postalo lažje in bolj logično: konec koncev, lahko zdaj res fleksibilno prilagoditi kateri koli predmet, manj pogosto zatečejo k JavaScript. Recimo, da je treba prilagoditi preglednost ozadju - CSS takoj ponuja več možnosti.

Ozadje opredeljena z nizom atributov (ozadje-slike, ozadje legi , ozadje velikosti, ozadje-večkratne, ozadje-priključitvene, ozadje-porekla, ozadje spenjala, ozadje-color), od katerih je vsak lahko dodeli ločeno ali skupaj po atribut ozadje. Oglejmo si vsakega od njih podrobno.

Lastnost ozadja-barvo

V CSS, barva ozadja je mogoče nastaviti na več načinov: z uporabo kode hex, barva ime ali RGB vstopa. V CSS3 je postalo mogoče uporabiti namesto RGB-snemanja možnost z RGBA.

Hex barva je zabeležena v nepremičnine po mreži: background-color: # FFDAB9. Če so znaki v tem vnosu iste parov, oznaka je ponavadi malo cut: # ccff00 lahko zapišemo kot # cf0:

Telo {ozadje-color: # cf0 ;}.

Ime je, tudi v najbolj eksotičnih barv. Na primer, poleg standard rdeče in bele lahko uporabite NavajoWhite (#FFDEAD) ali Honeydew2 (# E0EEE0):

Telo {ozadja-barva: vijolična; }.

Slednja možnost je RGB ali vnos RGBA omogoča, da določite, ne samo barve, temveč tudi preglednost ozadju CSS, vendar je metoda deluje samo v IE različicah, starejših od 9. Drugi brskalniki prepoznati normalno različico s preglednostjo. V skladu s standardi W3C je bolje uporabiti še RGBA namesto bolj običajne RGB.

Zadnja vrednost v RGBA ozadju in nastavi motnosti od 0 (transparentna) do 1 (neprozorna).

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 ).

Lastnost ozadja-image

Najbolj različica navzkrižno brskalnik s prozornim ozadjem - to je uporaba slike. V CSS3, lahko nastavite tudi več slik, je to storjeno z vejico. primer:

{Ozadje telesa slik: url (bg1.png), url (bg2.png)}.

Ta način podpira tudi IE8. Več slik v ozadju gume, ki se uporablja pri postavitvi. Pomembno je, da ne pozabite, da uporabi vse slike in nastavite barvo ozadja v CSS, saj lahko uporabniki preprosto naložite sliko.

Lastnost ozadja-položaj

Če želite sliko nastaviti enote ozadja, CSS vam omogoča, da postavite sliko kjerkoli na zaslonu. Privzeto, se slika nahaja v zgornjem levem kotu. Lastnost je bodisi ustnih navodil (zgoraj, spodaj, levo, desno), številčno (obresti, pik in druge enote). V tem primeru morate navesti dve vrednosti horizontalnih in vertikalnih:

Telo {ozadja-položaj: igralec center ;} - v tem primeru bo vzorec se nahaja na desni strani strani, zgornji in spodnji strani roba slike na isto.

Lastnost ozadja velikosti

Včasih je potrebno, da se raztezajo ozadje CSS ali zmanjšati njegovo velikost. Če želite to narediti, uporabite atribut ozadja velikosti in velikosti ozadje lahko nastavite v pikslih ali odstotkih, in vse druge enote.

S tem atributom, obstaja nekaj težav: za pravilen prikaz ozadja v prejšnjih različicah predpone brskalnika, ki se uporabljajo. Seveda, trenutna različica v celoti podpira ta atribut in potreba po posebnih lastnostih izginila.

Lastnost ozadja-nastavek

Ta atribut določa vedenje slike ozadja med drsenjem. Torej, lahko traja 3 vrednosti (ne vključno s podedovali, skupno za vse atribute razpravljali v tem članku):

• fiksna - naredi sliko na ozadju določen;
• pomikanje - ozadja pomika z ostalih elementov;
• lokalno - slika v ozadju se pomika, če je drsenje vsebine. Ozadje, ki presega vsebino okvirja je fiksna.

Primer uporabe:

Telo {ozadja-nastavek fiksno}.

Trenutno Firefox ne podpira zadnje nepremičnine (lokalno).

Lastnost ozadja-poreklo

Ta atribut je odgovoren za določanje položaja elementa. Zgodnje brskalniki zahtevajo uporabo predpon. Nepremičnina sama ima tri parametre:

• oblazinjenje, škatla je nameščena glede na vzorec robov, ob upoštevanju debeline okvirja;
• mejni-box lastnosti drugačna od prejšnje tem, da je mejna črta je lahko v celoti ali delno prekrivajo vzorec;
• Vsebnost-box odlikovanje slika pryavyazyvaya njeno vsebino.

Če podate več vrednosti, potem lahko brskalniki reagira na svoj način: Firefox in Opera zaznavajo samo prvo možnost.

Lastnost ozadja-ponovitev

Kot pravilo, če je slika ozadja je določeno, da je treba ponavljati vodoravno ali navpično. Za to in se uporablja atribut ozadja-ponovi. Tako blok v ozadju, CSS, ki vsebuje takšno lastnost ima lahko eno od številnih parametrov:

• no-repeat - na strani v eni različici pojavi slika;
• ponovimo - ozadje se ponovi v x in y;
• ponavljajočih x - samo vodoravno;
• repeat-y - samo vertikalno;
• prostor - ozadje se ponovi, če pa je prostor mogoče izpolniti med slikah videti prazne;
• krog - slika je pomanjšana, če ne zapolni celotno območje celotne slike.

Primer atributov:

Telo {ozadja-ponovitev: izpostavljenost brez škodljivega Ponavljanje Ponavljanje} - podobno kot ozadje-ponavljanja: ponovi-y.

pri izpisu parametrov, ločenih z vejicami v CSS3 lahko določite vrednosti za več slik.

Lastnost ozadja-posnetek

Ta atribut definira obnašanje ozadju okviru meja (na primer, v primeru perforirani okvirjev):

• oblazinjenje-box - ozadje prikaže v notranjosti bloka;
• border-box - slika spada v okvir;
• Vsebnost-box - slika v ozadju se pojavi le v vsebini.

Primer uporabe:

Telo {ozadje sponko: vsebinsko polje;}.

Chrom in Safari zahtevajo -webkit- predpono.

Motnosti atributi in filter

motnost atribut omogoča nastavitev preglednost ozadju - CSS nepremičnine bo delovala v vseh brskalnikih. Vrednost je nastavljena v območju od 0,0 do vključno 1,0. V tem primeru lahko nastavite prosojnost ozadja CSS ne celo vrednost namesto 0,3 dovolj pisati .3:

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

Za nastavitev prosojnosti ozadja, CSS je primeren tudi za IE pod deveto različico, uporabite atribut filter:

.block {ozadja-image: url ( img.png); Filter: alfa (Motnost = 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 spremlja statistične podatke o uporabi za brskalnike neodvisnih in vseh drugih državah. Največji problem vseh DTP - starejše različice IE, ne omogočajo, da uporabljate v polnem obsegu CSS3. Pri postavitvi ne pozabite uporabiti posebne storitve, ki preveri, ali vaš brskalnik podpira vse CSS nepremičnine. Če ne morete namestiti starejše različice brskalnikov, najti službo, ki bo preveril lokacijskih v različnih brskalnikih na spletu.