CSS bakgrunn åpenhet. Transparent bakgrunn eller tekst med CSS

Med bruk av CSS3 webdesignere jobber på mange måter har blitt enklere og mer logisk: tross alt, kan du nå virkelig fleksibelt tilpasse et objekt, sjeldnere 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 (bakgrunn-billed, bakgrunn-posisjon , bakgrunn-størrelse, bakgrunn-gjenta, bakgrunn-feste, bakgrunn-opprinnelse, bakgrunn-klips, bakgrunnsfarge), som hver kan være tilordnet hver for seg eller kombinert under attributt bakgrunn. La oss undersøke hver av dem i detalj.

Attributt background-color

I CSS, bakgrunnsfargen kan stilles på flere måter: ved hjelp av en hex kode, fargenavn eller RGB-inngang. I CSS3 ble det mulig å bruke i stedet for RGB-opptak alternativet med RGBA.

Hex fargekode er registrert i eiendommen etter gitteret: background-color: # FFDAB9. Hvis tegnene i dette innlegget er de samme parene, er koden som regel et lite kutt: # ccff00 kan skrives som # cf0:

body {bakgrunnsfarge: # CF0 ;}.

Navnet er, selv i de mest eksotiske farger. For eksempel, i tillegg til standard røde og hvite du kan bruke NavajoWhite (#FFDEAD) eller Honeydew2 (# E0EEE0):

body {bakgrunnsfarge: fiolett; }.

Det siste alternativet er RGB eller RGBA inngang lar deg spesifisere ikke bare fargen, men også gjennomsiktigheten til CSS bakgrunn, men metoden fungerer bare i IE-versjoner eldre enn ni. Andre nettlesere gjenkjenne normal versjon med åpenhet. I henhold til W3C standarder er det å foretrekke å bruke still RGBA i stedet for den mer vanlige RGB.

Den siste verdien i RGBA bakgrunn og setter uklar fra 0 (gjennomsiktig) til 1 (ugjennomsiktig).

Det er noen uvanlige verdier. Bakgrunnsfargen kan stilles inn med HSL og HSLA. Begge ble tilsatt til CSS3, og derfor er ikke støttet av IE versjon 9 eller høyere. Utførelsesformer identisk RGB eller RGBA, bare i et annet format: Fargetone (skygge - verdi på fargehjulet, er gitt i grader), Saturate (metning - fargeintensitet som en prosentandel, fra 0 til 100), lyshet (letthet - lyshet målt på samme måte parameter Saturate ).

Attributt background-image

Den mest cross-browser versjon av gjennomsiktig bakgrunn - dette er bruken av bildet. I CSS3, kan du sette enda flere bilder, er dette gjort gjennom et komma. eksempel:

{Bakgrunns-kroppen bilde: url (bg1.png), url (bg2.png)}.

Denne måten å støtte enda IE8. Flere bilder i bakgrunnen av gummien som brukes i layouten. Viktigere, ikke glem å bruke et bilde og sette bakgrunnsfargen i CSS, som brukerne kan laste opp et bilde.

Attributt background-posisjon

Hvis du bruker bildet for å angi bakgrunnen enhet, CSS lar deg plassere bildet hvor som helst på skjermen. Som standard blir bildet ligger i øvre venstre hjørne. Attributt tar enten verbale instruksjoner (topp, bunn, venstre, høyre), en numerisk (renter, piksler og andre enheter). I dette tilfellet må du angi to verdier, horisontale og vertikale:

body {bakgrunn-stilling: høyre sentrum ;} - i dette eksempel, vil et mønster bli plassert på den høyre side av siden, toppen og bunnen av bildet avstand til den samme.

Attributt bakgrunn størrelse

Noen ganger er det nødvendig å strekke CSS bakgrunn eller redusere størrelsen. For å gjøre dette, bruker attributtet bakgrunn-størrelse, og størrelsen av bakgrunns kan settes i piksler eller prosenter, og eventuelle andre enheter.

Med denne egenskapen, er det noen problemer: for korrekt visning av en bakgrunn i tidligere versjoner av nettleseren prefikser som skal brukes. Selvfølgelig, den nåværende versjonen støtter fullt ut dette attributtet og behovet for spesifikke egenskaper forsvant.

Attributt background-vedlegg

Dette attributtet angir oppførselen til bakgrunnsbilder mens du blar. Så kan det ta 3 verdier (ikke inkludert arve, totalen for alle attributtene som er omtalt i denne artikkelen):

• fast - gjør bildet på bakgrunn av faste;
• bla - bakgrunns ruller med resten av elementene;
• lokale - bildet på bakgrunnen er rullet hvis rulling har innhold. Bakgrunn som går utover innholdet i rammen er fast.

Eksempel på bruk:

body {bakgrunn koplingen fast}.

Foreløpig Firefox støtter ikke den siste eiendommen (lokal).

Attributt background-opprinnelse

Denne egenskap er ansvarlig for posisjoneringselementet. Tidlige nettlesere krever bruk av prefikser. Eiendommen selv har tre parametre:

• padding-boksen er plassert i forhold til den kant mønster, mens man tar hensyn til tykkelsen av rammen;
• border-box egenskaper forskjellig fra den foregående i at grenselinjen kan være helt eller delvis overlapper mønsteret;
• innhold-box posisjonering bilde pryavyazyvaya dens innhold.

Hvis du angir flere verdier, da nettlesere kan reagere på sin egen måte: Firefox og Opera oppfatter bare det første alternativet.

Attributt background-repeat

Som en regel, hvis bakgrunnsbildet er angitt, det må gjentas horisontalt eller vertikalt. For dette og brukte attributtet background-repeat. Således blokk bakgrunn, CSS som inneholder en slik egenskap kan ha en av flere parametere:

• no-repeat - bildet vises på en side i en enkel versjon;
• gjenta - bakgrunn gjentas i x- og y;
• repeat-x - bare horisontalt;
• repeat-y - bare vertikalt;
• plass - bakgrunn gjentas, men hvis plassen er umulig å fylle i mellom bildene vises tom;
• runde - bildet er skalert, hvis det ikke fyller hele området av hele bilder.

Eksempel på attributtene:

body {bakgrunn-repeat: no- gjenta gjenta} - lignende bakgrunn-repeat: repeat-y.

I CSS3 kan angi verdier for flere bilder når liste parametre, separert med komma.

Attributt background-klipp

Denne egenskap definerer oppførselen til bakgrunnen under grensene (f.eks, i tilfellet med de stiplede rammer):

• padding-box - bakgrunn vises i det indre av blokken;
• border-box - bildet kommer under rammen;
• Innhold-box - bildet i bakgrunnen vises bare i innholdet.

Eksempel på bruk:

body {bakgrunn klype: innholds- boksen;}.

Krom og Safari krever -webkit- prefiks.

Gjennomsiktighet attributter og filter

opacity egenskap lar deg sette gjennomsiktigheten til bakgrunnen - CSS eiendom vil fungere i alle nettlesere. Verdien angis i området fra 0.0 til 1.0 inklusive. I dette tilfellet, kan du sette gjennomsiktigheten til CSS bakgrunn ingen heltall i stedet for 0,3 er nok til å skrive 0,3:

.block {bakgrunnsbilde-: url ( img.png); opacity: 0,3;}.

For å sette bakgrunns opacity, er CSS egnet også for IE under den niende versjonen, bruker filter attributt:

.block {bakgrunnsbilde-: url ( img.png); filter: alfa (opasitet = 30)}.

I dette tilfellet, er tettheten verdien ligger mellom 0 og 100. Merk at tettheten tilskriver ulike åpenhet innstillinger via RGBA arv: når du bruker dekkevne blir klart ikke bare bakgrunnen, men også alle de elementene inne i enheten.

Alltid overvåke brukerstatistikk for CIS nettlesere og alle andre land. Det største problemet av alt DTP - eldre versjoner av IE, har de ikke tillater deg å bruke det fulle omfanget CSS3. I oppsettet ikke glem å bruke spesielle tjenester som sjekker om nettleseren støtter alle CSS eiendom. Hvis du ikke kan installere eldre versjoner av nettlesere, finne en tjeneste som vil sjekke området arbeid i flere nettlesere på nettet.