CSS gennemsigtighed baggrund. Gennemsigtig baggrund eller tekst med CSS

Med fremkomsten af CSS3 webdesignere arbejder på mange måder er blevet lettere og mere logisk: trods alt, kan du nu virkelig fleksibelt tilpasse ethvert objekt, mindre hyppigt ty til JavaScript. Lad os sige, du har brug for at justere gennemsigtigheden af baggrunden - CSS tilbyder straks flere muligheder.

Baggrund defineret af et sæt af attributter (baggrund-image, baggrund-stillingen , baggrund størrelse, baggrund-repeat, baggrund-fastgørelse, baggrund-oprindelse, baggrund-clip, baggrundsfarve), som hver kan tildeles separat eller kombineret under attributtet baggrund. Lad os undersøge hver af dem i detaljer.

Attribut background-color

I CSS, baggrundsfarven kan indstilles på flere måder: ved hjælp af en hex kode, farve navn eller RGB-indgang. I CSS3 blev det muligt at bruge i stedet for RGB-optagelse option med RGBA.

Hex farvekode registreres i ejendommen efter gitter: background-color: # FFDAB9. Hvis tegnene i denne post er de samme par, koden er som regel lidt snit: # ccff00 kan skrives som # cf0:

body {background-color: # cf0 ;}.

Navnet er, selv i de mest eksotiske farver. For eksempel, i tillæg til standard rød og hvid du kan bruge NavajoWhite (#FFDEAD) eller Honeydew2 (# E0EEE0):

body {background-color: lilla; }.

Sidstnævnte mulighed er RGB eller RGBA indgang gør det muligt at specificere ikke kun farve, men også gennemsigtigheden af CSS baggrund, men den metode virker kun i IE-versioner ældre end 9. Andre browsere genkende normale udgave med gennemsigtighed. Ifølge W3C standarder foretrækkes det at anvende stadig RGBA stedet for den mere sædvanlige RGB.

Den sidste værdi i RGBA baggrund og indstiller opacitet fra 0 (gennemsigtig) til 1 (uigennemsigtig).

Der er nogle usædvanlige værdier. Baggrundsfarven kan indstilles ved hjælp af HSL og HSLA. Begge blev tilføjet til CSS3, og derfor ikke er understøttet af IE version 9 eller højere. Udførelsesformer identisk RGB eller RGBA, kun i et andet format: Hue (shade - værdi på farvehjulet, er givet i grader), Gennemvæd (mætning - farveintensitet i procent, fra 0 til 100), Lightness (lethed - lysstyrke, målt på lignende parameter Gennemvæd ).

Attribut baggrund-billede

Den mest cross-browser-version af den gennemsigtige baggrund - dette er brugen af billedet. I CSS3, kan du indstille endnu flere billeder, sker dette gennem et komma. eksempel:

{Background-organ image: URL (bg1.png), webadresse (bg2.png)}.

Denne måde at støtte selv IE8. Flere billeder i baggrunden af gummi, der anvendes i layoutet. Vigtigere er det, så glem ikke at bruge ethvert billede og sætte baggrundsfarven i CSS, som brugerne blot kan uploade et billede.

Attribut background-position

Hvis du bruge billedet til at indstille baggrunden enhed, CSS giver dig mulighed for at placere billedet et sted på skærmen. Som standard er det billede er placeret i øverste venstre hjørne. Egenskab tager enten verbale instruktioner (top, bund, venstre, højre), en numerisk (interesse, pixel og andre enheder). I så fald skal du angive to værdier, vandrette og lodrette:

body {background-position: højre center ;} - i dette eksempel vil mønsteret blive placeret på højre side af siden, toppen og bunden af billedet afstand til samme.

Attribut baggrund-størrelse

Nogle gange er det nødvendigt at strække CSS baggrund eller reducere dens størrelse. For at gøre dette, skal du bruge attributten baggrund-størrelse, og størrelsen af baggrunden kan indstilles i pixels eller procenter, og alle andre enheder.

Med denne egenskab, der er nogle problemer: for korrekt visning af en baggrund i de tidligere versioner af browseren præfikser, der skal bruges. Selvfølgelig, den nuværende version støtter fuldt ud denne egenskab, og behovet for særlige egenskaber forsvundet.

Attribut background-attachment

Denne attribut angiver adfærd baggrundsbilleder, mens du ruller. Så kan det tage 3 værdier (ikke inklusive arve, det samlede beløb for alle attributter omtales i denne artikel):

• fast - gør billedet på baggrund af faste;
• rulle - background ruller med resten af elementerne;
• lokal - billedet på baggrund rulles hvis rulning har indhold. Baggrund der går ud over indholdet af rammen er fast.

Eksempel på anvendelse:

body {background-attachment fast}.

I øjeblikket er Firefox ikke understøtter den sidste egenskab (lokal).

Attribut baggrund-oprindelse

Denne attribut er ansvarlig for positioneringselementet. Tidlige browsere kræver brug af præfikser. Selve ejendommen har tre parametre:

• padding-box er placeret i forhold til kanten mønster, idet der tages hensyn til tykkelsen af rammen;
• border-box egenskaber forskellige fra den foregående ved, at grænsefladen linje kan være helt eller delvist overlapper mønstret;
• indhold-box positionering billede pryavyazyvaya dens indhold.

Hvis du angiver flere værdier, så browsere kan reagere på deres egen måde: Firefox og Opera opfatter kun den første mulighed.

Attribut background-repeat

Som regel hvis baggrundsbilledet er angivet, det skal gentages vandret eller lodret. Af denne og anvendes attributten baggrund-repeat. Således blok baggrund, CSS, som indeholder en sådan ejendom kan have en af flere parametre:

• no-repeat - billedet vises på en side i en enkelt udgave;
• gentager - baggrund gentages i x- og y;
• repeat-x - kun horisontalt;
• gentag-y - kun lodret;
• rum - baggrund gentages, men hvis pladsen er umuligt at udfylde mellem billederne vises tomme;
• runde - billedet er skaleret, hvis det ikke fylder hele området af hele billeder.

Eksempel på de attributter:

body {background-repeat: no repeat repeat} - lignende baggrund-repeat: repeat-y.

I CSS3 kan angive værdier for flere billeder, når notering parametre adskilt af kommaer.

Attribut baggrund-klip

Denne attribut adfærd fastlægges af baggrunden under grænserne (for eksempel i tilfældet med de punkterede rammer):

• padding-box - baggrund, der vises i det indre af blokken;
• border-box - billedet kommer inden for rammerne;
• indhold-box - billedet på baggrund vises kun i indholdet.

Eksempel på anvendelse:

body {background-clip: indhold- box;}.

Chrom og Safari kræver -webkit- præfiks.

Opacitet attributter og filter

opacitet attribut gør det muligt at indstille gennemsigtigheden af baggrunden - CSS ejendom vil fungere i alle browsere. Værdien indstilles i intervallet fra 0.0 til 1.0 inclusive. I så fald kan du indstille gennemsigtigheden af CSS baggrund ingen heltalsværdi i stedet for 0,3 er nok til at skrive .3:

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

For at indstille baggrunden opacitet, CSS er egnet selv for IE under den niende udgave, bruge filteret attribut:

.block {background-image: url ( img.png); filter: alpha (opacitet = 30)}.

I dette tilfælde er opacitetsværdien indstilles mellem 0 og 100. Bemærk, at uigennemsigtighed tilskriver forskellige indstillinger gennemsigtighed via RGBA arv: ved brug af opacitet bliver klart ikke kun baggrunden, men også alle de elementer inde i enheden.

overvåge altid dine brugsstatistikker til SNG browsere og alle andre lande. Det største problem for alle DTP - ældre versioner af IE, de ikke tillade dig at bruge det fulde omfang CSS3. I layout glem ikke at bruge de særlige tjenester, der kontrollerer, om din browser understøtter alle CSS ejendom. Hvis du ikke kan installere ældre versioner af browsere, finde en tjeneste, der vil tjekke hjemmesiden arbejde i flere browsere online.