Brug af CSS til at indstille et baggrundsbillede

• Kan 6, 2024

Har du nogensinde spekuleret på, hvordan websteder administrerer disse smukke designs og billeder, der flyder bag teksten? Det hele foregår gennem magien i Cascading Style Sheets. CSS giver dig ikke kun mulighed for at udpege et billede til din sides baggrund, det giver dig også mulighed for at finpudse, hvordan billedet vises - så du kan få netop det udseende, du ønsker.

Den grundlæggende byggesten til dit baggrundsbillede er passende nok egenskaben 'baggrundsbillede'. Du bruger denne egenskab til at fortælle dit websted, hvor billedfilen er placeret som følger:

krop {
baggrund-billede: url ("image.gif");
}

Det er alt hvad du skal gøre for at placere et baggrundsbillede til din webside. Naturligvis ønsker du sandsynligvis at tilpasse, hvordan billedet ser ud. Lad os sige, at du ønsker, at dit billede skal starte øverst på siden, men at være centreret vandret i stedet for venstrejusteret (standardjusteringen). I dette tilfælde vil du føje egenskaben 'baggrundsposition' til din CSS-regel:

krop {
baggrund-billede: url ("image.gif");
baggrundsposition: center top;
}

Når du definerer egenskaben 'baggrundsposition', indstiller den første værdi den vandrette justering (venstre, midt eller højre), og den anden indstiller billedets lodrette justering (øverste, midterste eller nederste).

Dernæst beslutter du, at du vil forhindre, at billedet fliser (gentager sig selv) vandret, selvom du ønsker, at det skal flise lodret. Det er tid til at fremhæve egenskaben 'baggrund-gentag':

krop {
baggrund-billede: url ("image.gif");
baggrundsposition: center top;
baggrund-gentagelse: gentag-y;
}

Indstilling af værdien til 'gentag-y' fortæller browseren at flise baggrundsbilledet langs y-aksen, også lodret, men ikke x-aksen (vandret), hvilket er nøjagtigt hvad vi ønskede. Hvis du ville flise det vandret, men ikke lodret, ville du i stedet bruge værdien 'gentag-x'; Hvis du overhovedet ikke vil have billedet til at flise, skal du give det værdien 'ingen gentagelse'. Standardværdien er at flise billedet både vandret og lodret, så hvis det er det bedste valg for dit billede, behøver du ikke at indstille egenskaben 'baggrund-gentag' overhovedet.

Endelig kan du se på egenskaben 'baggrund-vedhæftet fil'. Som standard ruller dit billede, mens siden ruller, så hvis du ikke gentager billedet lodret, og du har en lang side, strækker dit billede sig ikke til bunden af ​​siden. Du kan ændre dette ved at indstille egenskaben 'baggrund-vedhæftning' til 'fast', hvilket får baggrundsbilledet til at forblive på samme sted på skærmen uanset hvordan siden ruller. Nu vil dine baggrundsbilledsregler se sådan ud:

krop {
baggrund-billede: url ("image.gif");
baggrundsposition: center top;
baggrund-gentagelse: gentag-y;
baggrund-vedhæftning: fast;
}


Hvis du vil holde dine CSS-regler så små som muligt, kan du kombinere alle dine baggrundsværdier i en linje ved at bruge egenskaben 'baggrund' som denne:

baggrund {
url ("image.gif") gentag-y fast center-top;
}

Når du bruger egenskaben 'baggrund', skal du liste værdierne i en bestemt rækkefølge:
[baggrund-farve (hvis brugt)] [baggrund-billede] [baggrund-gentagelse] [baggrund-vedhæftning] [baggrund-position]. Du kan udelade enhver værdi, som du ikke har brug for, du skal bare anføre de værdier, du bruger i den rigtige rækkefølge, ellers fungerer reglen ikke.

Video Instruktioner: Attack on Titan IN 9 MINUTES (Kan 2024).