Su css3 DTP darbo įvairiais būdais atėjimas tapo lengviau ir logiška: juk dabar galite padaryti, siekiant lanksčiai konfigūruoti objektą, rečiau griebiasi JavaScript.Tarkime, jums reikia reguliuoti fono skaidrumą - CSS karto siūlo keletą variantų.
fonas skirstomos pagal atributus (background-image, fonas padėtyje, fonas dydžio, fonas-repeat, background-areštas, background-kilmę, background-clip, background-color), rinkinys, kurių kiekvienas gali būti paskirtas vienas arsuvienyti pagal to paties atributo fone.Panagrinėkime kiekvieną iš jų detaliau.
atributas background-color
CSS, fono spalva gali būti nustatytas keliais būdais: naudojant šešioliktainis kodas, spalva pavadinimą arba RGB įvestį.Be CSS3 tapo įmanoma naudoti vietoj RGB įrašymo galimybe su RGBA.
HEX spalvos kodas yra parašyta po grotelių turtas: background-color: # FFDAB9.Jei poromis simbolių atitiktų tokį įrašą, kodas paprastai yra šiek tiek supjaustyti: # ccff00 gali būti parašytas kaip # cf0:
kūno {background-color: # cf0;}.
vardas ten net labiausiai egzotinių spalvų.Pavyzdžiui, be standartinio raudona ir balta, galite naudoti NavajoWhite (#FFDEAD) arba Honeydew2 (# E0EEE0):
kūną {background-color: Violetinė;}.
paskutinis variantas RGB arba RGBA įrašas leidžia jums nurodyti ne tik spalvą, bet ir fono CSS skaidrumą, bet pakeliui į darbą IE 9 tik senesnės versijos.Kitos naršyklės pripažinti normalų variantą su skaidrumu.Pagal W3C standartus tai geriau naudoti visi tą patį RGBA vietoj labiau įprasta RGB.
paskutinis vertė RGBA nustato fono neskaidrumo ir iš 0 (skaidrus) iki 1 (matinis).
Yra keletas neįprastų vertės.Fono spalva gali būti detalizuojamos naudojant HSL ir HSLA.Abu buvo įtraukta CSS3, todėl nepalaiko IE versija 9 arba didesnis.Nustatymai yra identiškos RGB arba RGBA, tiesiog kitokiu formatu: Hue (atspalvis - ant spalvų rato verte, atsižvelgiant į laipsniais), sočiųjų (prisotinimas - spalvos intensyvumas procentais, nuo 0 iki 100), lengvumas (lengvumas - ryškumas, matuojamas panašiai parametras sočiųjų).
atributas background-image
dauguma kryžminio naršyklės versija skaidriai fone - tai įvaizdžio naudojimas.Be CSS3, galite nurodyti, dar daugiau vaizdų, tai daroma per kableliais.Pavyzdys:
kūno {background-image: url (bg1.png), adresas (bg2.png)}.
palaiko šį net IE8.Keletas vaizdų kaip fone, naudojami nuo gumos, išdėstymo.Svarbu, nepamirškite naudoti bet kokį vaizdą, kaip nustatyta jūsų CSS fono spalvą, nes vartotojai gali tiesiog įkelkite nuotrauką.
atributas fonas padėčių
Jei naudojate vaizdą apibrėžti fono blokas, CSS leidžia vaizdą bet kur ekrane jums poziciją.Numatyta, kad vaizdas yra įsikūręs viršutiniame kairiajame kampe.Atributų priimti bet kokius žodinius nurodymus (viršuje, apačioje, kairėje, dešinėje) arba skaitmeninio (palūkanų, taškų ir kitų matavimo vienetų).Būtina nurodyti dvi vertės horizontaliam ir vertikaliam:
kūno {background-pozicijos: dešinėje centrą;} - šiame pavyzdyje fonas bus įsikūręs dešinėje puslapio pusėje, su viršuje ir apačioje prie atvaizdo atstumas yra tas pats.
atributas background-size
Kartais jums reikia naudoti CSS ruožas foną arba sumažinti jos dydį.Šiam tikslui, atributo background-dydis, o dydis gali būti apibrėžiamas kaip fono pikselių arba procentais, arba bet kuriuo kitu matavimo vienetui.
Su šio požymio, yra keletas problemų: teisingai rodyti fone vyresnio amžiaus naršyklių turite naudoti priešdėlį.Žinoma, dabartiniai versijos visiškai paremti šį atributą ir būtinybę imtis konkrečių savybių dingo.
atributas background-areštas
Šis atributas nurodo fono paveikslėlį elgesį, kai nemirksi.Pavyzdžiui, ji gali imtis 3 vertybes (išskyrus paveldėti už visų šiame straipsnyje požymius visas):
- fiksuoto - daro dėl fiksuoto fono paveikslėlį;
- slinkties - fono Scrolls su elementais poilsio;
- vietos - dėl fono vaizdas przewijany jei slinkimo yra turinys.Aplinkybės, kuri peržengia turinio fiksuotas.
Pavyzdys naudoti:
kūno {background-areštas fiksuoto}.
Šiuo metu "Firefox nepalaiko naujausią turtą (vietos).
atributas fonas kilmės
Šis atributas yra atsakinga už elemento padėties.Naršyklės senesnės versijos reikalauja priešdėlių naudojimą.Pati nuosavybė turi tris parametrus:
- apdaila dėžės pozicijas iš fono krašto, o atsižvelgiant į rėmo storis;
- sienos dėžutė savybės skiriasi nuo ankstesnių tuo, kad riba linija gali būti visiškai arba iš dalies padengti foną;
- turinys dėžė padėties vaizdą pryavyazyvaya jo turinį.
Jei nurodysite keletą reikšmių, naršyklė gali reaguoti savaip: "Firefox" ir "Opera priimti tik pirmąjį variantą.
atributas background-pakartoti
Kaip taisyklė, jei fonas vaizdas yra nurodytas, jis turi būti pakartotas horizontaliai arba vertikaliai.Dėl šios ir atributas background-repeat.Taigi, blokas fonas, CSS, kuris yra toks turtas gali turėti vieną iš kelių variantų:
- ne-Pakartokite - vaizdas atrodo ant vieno blanko puslapyje;
- Pakartokite - modelis kartojamas X ir Y;
- Pakartokite-x - tik horizontaliai;
- Pakartokite y - tik vertikaliai;
- erdvė - modelis kartojasi, bet jei erdvė yra užpildyta ne, tada yra tuštumos tarp paveikslėlių;
- apvalios - vaizdas mastelis, jei ji neturi užpildyti visą plotą visą vaizdą.
pavyzdys atributas:
kūno {background-repeat: no-repeat Pakartokite} - panašiai background-repeat: Pakartokite y.
Be CSS3 gali nurodyti dydžiai keliais vaizdais, jei perdavimas parametrai atskiriami kableliais.
atributas fone siužetas
Šis atributas nurodomas fono elgesį pagal ribas (pavyzdžiui, atsižvelgiant į punktyrinės rėmeliai atveju):
- apdaila dėžė - fone rodomas bloko vidų;
- sienos dėžutė - patenka į vaizdą taikymo sritį;
- turinys dėžė - ant fono paveikslėlį pasirodo tik per turinį.
Pavyzdys naudoti:
kūno {background-clip: turinys dėžė;}.
Chrom "ir" Safari reikalauti prefiksas -webkit- naudojimą.
neskaidrumo požymis ir filtruoti
neskaidrumo požymis leidžia nustatyti fono skaidrumą - CSS nuosavybė dirbs visose naršyklėse.Vertė yra reguliuojamas nuo 0,0 iki 1,0 imtinai.Su šiuo, galite nustatyti fono CSS skaidrumą be sveikuoju skaičiumi, o ne 0,3 užtenka parašyti .3:
.block {background-image: url (img.png);drumstumas: 0,3;}.
Norėdami nustatyti fono skaidrumą, CSS tinka net IE žemiau devintą versiją, naudokite atributą Filtras:
.block {background-image: url (img.png);Filtras: alfa (neskaidrumo = 30);}.
Šiuo atveju neskaidrumas yra nustatyta tarp 0 ir 100. Atkreipkite dėmesį, kad neskaidrumo priskirti skirtingus skaidrumo nustatymus Via RGBA paveldimumas: neskaidrumo per skaidrų foną yra ne tik, bet ir visos įrenginio viduje elementus.
Visada įsitikinkite, kad naršyklė lankomumo statistika NVS ir visose kitose šalyse.Didžiausia problema visų DTP - senesnės versijos IE, jie neleidžia visiškai išnaudoti CSS3.Jei išdėstymas nepamirškite naudoti specialias paslaugas, kad patikrinti, ar jūsų naršyklė yra nuosavybė CSS.Jei negalite įdiegti senesnės versijos naršyklių, jūs gaunate tokias paslaugas, kurios tikrina įvairių naršyklių svetainėje veikimą internete.
