Med bruk av CSS3 DTP arbeid på mange måter har blitt enklere og mer logisk: tross alt, kan du nå gjøre fleksibelt konfigurere et objekt, mer sjelden å ty til Javascript.La oss si at du trenger å justere gjennomsiktigheten til bakgrunnen - CSS tilbyr umiddelbart flere alternativer.
bakgrunn definert av et sett med attributter (background-image, background-position, bakgrunn størrelse, background-gjenta, background-vedlegg, background-opprinnelse, bakgrunn-klipp, background-color), som hver kan være foreskrevet alene ellerå forene under samme attributt bakgrunn.La oss se nærmere på hver av disse i mer detalj.
tilskriver background-color
I CSS, kan bakgrunnsfargen settes på flere måter: ved hjelp av den heksadesimale koden, fargenavn eller RGB-inngang.I CSS3 ble det mulig å bruke i stedet for RGB-opptak alternativet med RGBA.
hex fargekode er skrevet i eiendommen etter gitteret: background-color: # FFDAB9.Hvis tegnene i par matche en slik rekord, er koden vanligvis et lite kutt: # ccff00 kan skrives som # CF0:
body {background-color: # CF0;}.
navn der, selv i de mest eksotiske farger.For eksempel, i tillegg til standard rødt og hvitt, kan du bruke NavajoWhite (#FFDEAD) eller Honeydew2 (# E0EEE0):
body {background-color: purple;}.
siste alternativet RGB eller RGBA posten kan du angi ikke bare farge, men også gjennomsiktigheten til bakgrunnen CSS, men måten å jobbe i IE 9 bare eldre versjoner.Andre nettlesere gjenkjenne normal variant med åpenhet.I henhold til W3C standarder er det å foretrekke å benytte alle de samme RGBA i stedet for den mer vanlige RGB.
siste verdien på RGBA setter opacity av bakgrunn og fra 0 (gjennomsiktig) til 1 (ugjennomsiktig).
Det er noen uvanlige verdier.Bakgrunnsfargen kan spesifiseres ved hjelp av HSL og HSLA.Begge ble lagt i CSS3, og derfor ikke støttes av IE versjon 9 eller høyere.Alternativene er identiske med RGB eller RGBA, bare i et annet format: Hue (hue - verdien på fargehjulet, er gitt i grader), Mette (metning - fargeintensitet i prosent, fra 0 til 100), Lightness (lyshet - lysstyrke, målt tilsvarende parameter Saturate).
tilskriver background-image
mest cross-browser versjon av en gjennomsiktig bakgrunn - er bruken av bildet.I CSS3, kan du spesifisere enda flere bilder, er dette gjort gjennom et komma.Eksempel:
body {background-image: url (bg1.png), url (bg2.png)}.
støtter dette enda IE8.Flere bilder som bakgrunn brukes i utformingen av gummi.Viktigere, ikke glem å bruke hvilket som helst bilde som satt i CSS bakgrunnsfarge, fordi brukerne kan laste opp et bilde.
tilskriver background-posisjon
Hvis du bruker et bilde for å definere bakgrunnen blokk, lar CSS du å plassere bildet hvor som helst på skjermen.Som standard er bildet som ligger i øvre venstre hjørne.Attributt godta noen verbal retninger (øverst, nederst, venstre, høyre), eller numerisk (renter, piksler og andre enheter).Det er nødvendig å spesifisere de to verdiene for horisontal og vertikal:
body {background-posisjon: rett sentrum;} - i dette eksempelet, vil bakgrunnen bli plassert på høyre side av siden, med toppen og bunnen av avstanden til bildet er det samme.
tilskriver background-size
Noen ganger må du bruke CSS til å strekke bakgrunnen eller redusere størrelsen.For dette formål kan attributtet bakgrunn-størrelse, og størrelsen defineres som bakgrunnselementer eller prosent, eller i en hvilken som helst annen måleenhet.
Med denne egenskapen, er det noen problemer: for korrekt visning av en bakgrunn i eldre nettlesere må du bruke et prefiks.Selvfølgelig, de aktuelle versjonene støtter fullt ut dette attributtet og behovet for spesifikke egenskaper forsvant.
tilskriver background-vedlegg
Dette attributtet angir oppførselen til bakgrunnsbildet når du ruller.For eksempel kan det ta 3 verdier (unntatt arve, for summen av alle attributtene i denne artikkelen):
- fast - gjør bildet på bakgrunn av fast;
- bla - bakgrunnen ruller med resten av elementene;
- lokal - bildet på bakgrunnen er rullet om rulling er innholdet.Bakgrunn, noe som går utover innholdet er fast.
Eksempel på bruk:
body {background-vedlegg fast}.
tiden, Firefox støtter ikke de siste eiendoms (lokal).
tilskriver bakgrunn opprinnelse
Dette attributtet er ansvarlig for plassering av elementet.Nettlesere tidligere versjoner krever bruk av prefikser.Eiendommen selv har tre parametre:
- padding-box stillinger fra kanten av bakgrunnen, samtidig som det tas hensyn til tykkelsen på rammen;
- border-boks egenskaper forskjellig fra den forrige ved at grenselinjen kan være helt eller delvis dekke bakgrunnen;
- innhold-box posisjonering bilde pryavyazyvaya innholdet.
Hvis du spesifiserer flere verdier, kan nettleseren reagere på sin egen måte: Firefox og Opera bare godta det første alternativet.
tilskriver background-gjenta
Som regel, hvis bakgrunnsbildet er spesifisert, må det gjentas horisontalt eller vertikalt.For dette og brukt attributtet background-repeat.Dermed blokk bakgrunn, kan CSS som inneholder en slik eiendom har en av flere alternativer:
- no-repeat - bildet vises på siden i et enkelt skjema;
- gjenta - mønsteret gjentas i x- og y;
- repeat-x - bare horisontalt;
- repeat-y - bare vertikalt;
- plass - mønsteret gjentar seg, men hvis plassen er ikke fylt, så er det tomrom mellom bildene;
- runde - bildet er skalert, hvis det ikke fyller hele området hele bildet.
Eksempel på attributt:
body {background-repeat: no-repeat repeat} - tilsvar background-repeat: repeat-y.
I CSS3 kan angi verdier for flere bilder hvis overføringsparametre atskilt med komma.
tilskriver background-clip
Dette attributtet angir oppførselen bakgrunnen under grensene (for eksempel i tilfelle av de stiplede rammer):
- padding-box - bakgrunnen vises i det indre av blokken;
- border-box - kommer innenfor rammen av bildet;
- innhold-box - bildet på bakgrunn vises bare i innholdet.
Eksempel på bruk:
body {background-clip: content-boksen;}.
Krom og Safari krever bruk av prefikset -webkit-.
opasitet attributt og filtrere
opacity attributt kan du angi bakgrunnen åpenhet - CSS eiendom vil fungere i alle nettlesere.Verdien kan stilles fra 0.0 til 1.0 inkluderende.Med denne kan du stille gjennomsiktigheten til bakgrunnen CSS uten et heltall i stedet for 0,3 er nok til å skrive 0,3:
.block {background-image: url (img.png);opacity: 0,3;}.
For å sette bakgrunns åpenhet, er CSS egnet også for IE under den niende versjonen, bruker attributtet filter:
.block {background-image: url (img.png);filter: alpha (opacity = 30);}.
I dette tilfellet er tettheten ligger mellom 0 og 100. Merk at tettheten tilskriver ulike åpenhet innstillinger via RGBA arvelighet: opacity bruker en gjennomsiktig bakgrunn er ikke bare, men også alle elementer inne i enheten.
Sørg alltid bruksleseren statistikk over CIS og alle de andre landene.Det største problemet med all DTP - eldre versjoner av IE, har de ikke tillater full bruk av CSS3.Hvis oppsettet ikke glem å bruke spesielle tjenester som sjekker om nettleseren er en egenskap CSS.Hvis du ikke kan installere eldre versjoner av nettlesere, får du den tjeneste som sjekker driften av nettstedet i ulike nettlesere på nettet.
