S prihodom CSS3 DTP delo v mnogih pogledih je postalo lažje in bolj logično: po vsem, lahko sedaj storite za fleksibilno konfiguracijo predmeta, bolj redko zatečejo k JavaScript.Recimo, da ste morali prilagoditi preglednost ozadju - CSS takoj ponuja več možnosti.
ozadja opredeljena z nizom atributov (ozadje, slike, ozadje položaju, ozadje velikosti, ozadje, ponavljam, ozadje, navezanosti, ozadje, porekla, ozadje, clip, background-color), od katerih je vsak lahko predpiše samo alizdružiti pod isto atributov ozadju.Oglejmo si vsako od njih podrobneje.
atribut background-barvni
V CSS, lahko barva ozadja se določi na več načinov: s pomočjo šestnajstiško kodo, ime barve ali RGB vstop.V CSS3 je postalo mogoče uporabiti namesto RGB-snemalno opcije z RGBA.
barva hex koda je napisana v nepremičnine po rešetki: background-color: # FFDAB9.Če so znaki v parih ujemajo takšno evidenco, oznaka je ponavadi malo cut: # ccff00 lahko zapišemo kot # cf0:
body {background-color: # cf0;}.
ime tam, 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;}.
zadnja možnost RGB ali RGBA zapis vam omogoča, da določite, ne samo barve, temveč tudi preglednost ozadja CSS, ampak način dela v IE 9, šele starejše različice.Drugi brskalniki prepoznati normalno varianto s preglednostjo.V skladu s standardi W3C je bolje uporabiti vse isto RGBA namesto bolj običajne RGB.
Zadnja vrednost na RGBA določa prosojnost ozadja in od 0 (transparent) do 1 (neprozorna).
Obstajajo nekatere nenavadne vrednosti.Barva ozadja se lahko določi s pomočjo HSL in HSLA.Obe sta bili dodani v CSS3, in zato jih različici IE 9 ali več ni podprt.Možnosti so enake RGB ali RGBA, le v drugačni obliki: Hue (barvni odtenek - vrednost na barvnem kolesu, je podana v stopinjah), nasičena (saturation - barva intenzivnosti kot odstotek, od 0 do 100), lahkost (lahkotnost - svetlost, merjeno podobno Parameter nasičena).
atribut background slika
najbolj navzkrižno brskalnik različica pregleden ozadju - je uporaba slike.V CSS3, lahko določite tudi več slik, je to storjeno z vejico.Primer:
body {background-image: url (bg1.png), url (bg2.png)}.
podpira to celo IE8.Več slik kot ozadje, uporabljenega v razporeditev gume.Pomembno je, da ne pozabite, da uporabite poljubno sliko, kot je določeno v svojo barvo CSS ozadje, saj lahko uporabniki preprosto naložite sliko.
atribut ozadje-položaj
Če uporabljate sliko za določitev ozadja blok, CSS vam omogoča, da postavite sliko kjerkoli na zaslonu.Privzeto, se slika nahaja v zgornjem levem kotu.Atribut sprejema nobenih verbalne smereh (zgoraj, spodaj, levo, desno), ali numerično (obresti, pik in drugih enot).Treba je določiti dve vrednosti za horizontalno in vertikalno:
telesu {ozadja položaju: desno sredinski;} - v tem primeru, se bo ozadje se nahaja na desni strani strani, pri vrhu in na dnu razdalje na sliki so enaki.
atribut ozadje velikosti
Včasih boste morali uporabiti CSS, da se raztezajo ozadje ali zmanjšati njegovo velikost.Za ta namen, lahko atribut ozadje, velikost in velikost opredeljena kot ozadja slikovnih točk ali odstotek, ali v kateri koli drugi merski enoti.
S tem atributom, obstaja nekaj težav: za pravilen prikaz ozadjem v starejših brskalnikih morate uporabiti predpono.Seveda, trenutne različice celoti podpirajo ta atribut in potrebo po specifičnih lastnosti izginil.
atribut background-navezanost
Ta atribut določa vedenje slike za ozadje, ko se pomikate.Na primer, lahko traja 3 vrednosti (brez podedujejo, za skupni seštevek vseh atributov v tem članku):
- določen - naredi sliko na ozadju določen;
- pomikanje - v ozadju pomika s preostalim elementov;
- lokalni - slika na ozadju se pomika če pomikanjem je vsebina.Je določen v ozadju, ki presega vsebino.
Primer uporabe:
body {background-navezanost določen}.
Trenutno Firefox ne podpira najnovejše nepremičnine (lokalno).
atribut ozadje izvora
Ta atribut je odgovoren za pozicioniranje elementa.Brskalniki prejšnje različice zahtevajo uporabo predpon.Sama nepremičnina ima tri parametre:
- padding-box pozicije od roba ozadju, pri tem pa upoštevati debelino okvirja;
- meja-box lastnosti drugačna od prejšnje, da je mejna črta je lahko v celoti ali delno kritje ozadje;
- vsebina-box pozicioniranje slike pryavyazyvaya njeno vsebino.
Če podate več vrednosti, lahko brskalnik reagira na svoj način: Firefox in Opera sprejme le prvo možnost.
atribut ozadje, ponovite
Kot pravilo, če je slika v ozadju določeno, je treba ponoviti vodoravno ali navpično.Za to in se uporablja atribut ozadja-ponovi.Tako je blok v ozadju, CSS, ki vsebuje takšno lastnost ima lahko eno od več možnosti:
- brez ponavljanja - prikaže slike na strani v eni obliki;
- ponovite - vzorec ponovi v x in y;
- ponavljajočih x - samo vodoravno;
- ponovite-y - samo navpično;
- prostor - vzorec ponavlja, če pa se prostor napolni, ne, potem obstajajo praznine med slikami;
- krog - slika je pomanjšana, če ne zapolni celotno površino celotno sliko.
Primer atributa:
body {background-ponovitev: no-ponovite ponovite} - podobno background-ponavljanja: ponovi-y.
V CSS3 lahko določite vrednosti za več slik, če parametri prenosa ločene z vejicami.
atribut background-clip
Ta atribut določa obnašanje ozadju pod meja (na primer v primeru črtkanih okvirjev):
- padding-box - ozadje prikaže v notranjosti bloka;
- meja-box - spada na področje slike;
- vsebina-box - slika na ozadju pojavi le v vsebini.
Primer uporabe:
body {background-clip: vsebina-box;}.
Chrom in Safari zahtevajo uporabo predpone -webkit-.
motnost atribut in filtriranje
motnost atribut omogoča nastavitev preglednost ozadja - CSS nepremičnine bo deloval v vseh brskalnikih.Vrednost je nastavljiva od 0,0 do vključno 1,0.S tem lahko nastavite prosojnost ozadja CSS brez celoštevilsko vrednost namesto 0,3, je dovolj, da napišete .3:
.block {ozadja-image: url (img.png);motnost: 0,3;}.
želite nastaviti preglednost ozadja, CSS, je primerna tudi za IE pod deveto različico, uporabite filter atribut:
.block {background-image: url (img.png);filter: alpha (opacity = 30);}.
V tem primeru je motnost nastavite med 0 in 100. Opomba da motnost pripisala različne nastavitve preglednosti prek RGBA dednosti: motnosti uporabo prosojno ozadje je ne samo, ampak tudi vse postavke znotraj enote.
Vedno poskrbite, da se statistika uporabe brskalnika CIS in vseh drugih držav.Največji problem vseh DTP - starejše različice IE, ne omogočajo polno uporabo CSS3.Če se postavitev ne pozabite uporabljati posebne storitve, da preverite, ali je vaš brskalnik CSS lastnost.Če ne morete namestiti starejše različice brskalnikov, dobiš službo, ki preveri delovanje spletne strani v različnih brskalnikih na spletu.
