Med fremkomsten af CSS3 DTP arbejde på mange måder er blevet nemmere og mere logisk: trods alt, kan du nu gøre for fleksibelt at konfigurere et objekt, mere sjældent ty til JavaScript.Lad os sige, du har brug for at justere gennemsigtigheden af baggrunden - CSS straks giver flere muligheder.
baggrund defineret ved et sæt attributter (baggrund-image, baggrund-stilling, baggrund-størrelse, baggrund-repeat, baggrund-fastgørelse, baggrund-oprindelse, baggrund-clip, baggrund-farve), som hver især kan ordineres alene ellerat forene under samme attribut baggrund.Lad os undersøge hver af disse mere detaljeret.
attribut baggrund-farve
I CSS, kan baggrundsfarven indstilles på flere måder: ved hjælp af hexadecimal kode, farve navn eller RGB-indgang på.I CSS3 blev det muligt at bruge i stedet for RGB-optagelse option med RGBA.
hex farvekode skrives i ejendommen, efter at gitter: background-color: # FFDAB9.Hvis tegnene i par matcher en sådan rekord, koden er normalt en lille snit: # ccff00 kan skrives som # CF0:
krop {background-color: # CF0;}.
navn der, selv i de mest eksotiske farver.For eksempel, i tillæg til standard rød og hvid, kan du bruge NavajoWhite (#FFDEAD) eller Honeydew2 (# E0EEE0):
krop {background-color: lilla;}.
sidste mulighed RGB eller RGBA rekord giver dig mulighed for at angive ikke kun farve, men også gennemsigtigheden af baggrunden CSS, men den måde at arbejde i IE 9 kun ældre versioner.Andre browsere genkende normale variant med gennemsigtighed.Ifølge de W3C standarder er det at foretrække at bruge alle de samme RGBA stedet for de mere sædvanlige RGB.
sidste værdi på RGBA sætter opaciteten af baggrunden og fra 0 (gennemsigtig) til 1 (uigennemsigtig).
Der er nogle usædvanlige værdier.Baggrundsfarven kan angives ved hjælp HSL og HSLA.Begge blev tilføjet i CSS3, og derfor ikke er understøttet af IE version 9 eller højere.Optioner er identiske med RGB eller RGBA, bare i et andet format: Hue (nuance - værdien på farvehjulet, er givet i grader), Gennemvæd (mætning - farveintensitet som en procentdel, fra 0 til 100), Lightness (lethed - lysstyrke, målt på samme måde parameter Gennemvæd).
attribut baggrund-image
mest cross-browser version af en gennemsigtig baggrund - er brugen af billedet.I CSS3, kan du angive endnu flere billeder, dette sker gennem et komma.Eksempel:
krop {background-image: url (bg1.png), url (bg2.png)}.
understøtter denne selv IE8.Flere billeder som baggrund anvendes i opstillingen af gummi.Vigtigere er det, så glem ikke at bruge ethvert billede som fastsat i dit CSS baggrundsfarve, fordi brugerne blot kan uploade et billede.
attribut baggrund-stillingen
Hvis du bruger et billede for at definere baggrunden blok, CSS giver dig mulighed for at placere billedet som helst på skærmen.Som standard er det billede placeret i øverste venstre hjørne.Attribut acceptere nogen verbale retninger (top, bund, venstre, højre), eller numerisk (renter, pixel og andre enheder).Det er nødvendigt at præcisere de to værdier for horisontal og vertikal:
krop {background-position: højre center;} - i dette eksempel, vil baggrunden blive placeret på højre side af siden, med toppen og bunden af afstanden til billedet er de samme.
attribut baggrund størrelse
Nogle gange skal du bruge CSS til at strække baggrunden eller reducere dens størrelse.Til dette formål kan attributten baggrund-størrelse, og størrelsen defineres som baggrund pixels eller procent, eller i nogen anden måleenhed.
Med denne attribut, der er nogle problemer: for korrekt visning af en baggrund i ældre browsere, du skal bruge et præfiks.Naturligvis de aktuelle versioner støtter fuldt ud denne attribut og behovet for specifikke egenskaber forsvundet.
attribut baggrund-tilknytning
Denne attribut angiver opførsel baggrundsbilledet, når du ruller.For eksempel kan det tage 3 værdier (eksklusive arve, til summen af alle de attributter i denne artikel):
- fast - gør billedet på baggrund af faste;
- scroll - baggrunden ruller med resten af elementerne;
- lokal - billedet på baggrunden rulles hvis rulning er indhold.Baggrund, som går ud over indholdet er fast.
Eksempel på brug:
krop {background-tilknytning fast}.
øjeblikket Firefox understøtter ikke den nyeste ejendom (lokal).
attribut baggrund-oprindelse
Denne attribut er ansvarlig for positionering af elementet.Browsere tidligere versioner kræver anvendelse af præfikser.Selve ejendommen har tre parametre:
- padding-box positioner fra kanten af baggrunden, samtidig med at der tages hensyn til tykkelsen af rammen;
- grænse-box egenskaber end de foregående, idet grænselinjen kan være helt eller delvist dække baggrunden;
- indhold-box positionering billede pryavyazyvaya dens indhold.
Hvis du angiver flere værdier, kan browseren reagere på deres egen måde: Firefox og Opera kun acceptere den første mulighed.
attribut baggrund-gentage
Som regel hvis baggrundsbilledet er angivet, skal det gentages vandret eller lodret.Af denne og anvendes attributten background-repeat.Således blok baggrund, CSS, som indeholder en sådan ejendom kan have en af flere muligheder:
- no-repeat - billede vises på siden i en enkelt form
- repeat - mønster gentaget i x- og y;
- repeat-x - kun vandret;
- repeat-y - kun lodret
- plads - mønsteret gentager, men hvis pladsen er fyldt ikke, så er der hulrum mellem billeder;
- runde - billedet er skaleret, hvis det ikke fylder hele området hele billedet.
Eksempel på attribut:
krop {background-repeat: no-repeat repeat} - tilsvarende baggrund-repeat: repeat-y.
I CSS3 kan angive værdier for flere billeder, hvis transfer parametre adskilt af kommaer.
attribut baggrund-klip
Denne attribut angiver opførsel af baggrunden under grænserne (for eksempel i forbindelse med de stiplede rammer):
- padding-box - baggrund vises i det indre af blokken;
- grænse-box - falder ind i billedet;
- indhold-box - billedet på baggrunden vises kun i indholdet.
Eksempel på brug:
krop {background-clip: indhold-box;}.
Chrom og Safari kræver brug af præfikset -webkit-.
opacitet attribut og filtrere
opacitet attribut kan du indstille baggrunden gennemsigtighed - CSS ejendom vil fungere i alle browsere.Værdien kan indstilles fra 0.0 til 1.0 inklusive.Med denne kan du indstille gennemsigtigheden af baggrunden CSS uden et heltal væ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 gennemsigtighed, CSS er velegnet selv for IE under den niende udgave, skal du bruge attributten filter:
.block {background-image: url (img.png);filter: alpha (opacitet = 30);}.
I dette tilfælde er opaciteten indstilles mellem 0 og 100. Bemærk, at uigennemsigtighed attribut forskellige gennemsigtighed indstillinger via RGBA arvelighed: opacitet ved hjælp af en gennemsigtig baggrund er ikke kun, men også alle elementer inde i enheden.
Sørg altid statistikken i SNG og alle de andre lande brug browser.Det største problem med alle DTP - ældre versioner af IE, de ikke tillader fuld brug af CSS3.Hvis layoutet ikke glemmer at bruge de særlige tjenester, der kontrollerer, om din browser er en ejendom CSS.Hvis du ikke kan installere ældre versioner af browsere, får du den tjeneste, der kontrollerer driften af anlægget i forskellige browsere online.
