Sådan tilføjes sjov CSS-baggrunde til dine websteder

Sep 11, 2025

hvordan

Tiden var en webside baggrund var et lille fliser billede - og ofte hæslige, angreb hver besøgendes øjenkugler. I dag danner baggrunden grundlaget for meget online grafisk design.

Denne revolution i baggrunde på nettet er blevet drevet af fremskridt i CSS. Webstandarder har nu råd til langt mere kontrol, så du kan omhyggeligt definere en baggrunds position, arbejde med gradienter og tilføje flere baggrunde til et enkelt element.

Dækker alt på dette område ville kræve en bog, og så vi har valgt nogle vigtige udgangspunkt for at få dig til at gå, og det ulige valglink for dig at udforske yderligere. God fornøjelse!

Tilføj CSS baggrunde til websideelementer

CSS Baggrunde kræver baggrund shorthand ejendom, eller brugen af mere specifikke egenskaber, såsom (men ikke begrænset til): baggrundsfarve ; baggrundsbillede ; BAGGRUNDPOSITION. ; baggrundsstørrelse. ; baggrundsrepræsentation ; og baggrundsophæftet fil . Disse kan defineres for websidnes baggrund (gennem legeme vælger) eller sidelementer som overskrifter, divs, og så videre.

På det mest grundlæggende niveau kan du bruge baggrund For at vende en side rød:

 krop {
 Baggrund: Rød;
 }

Går lidt mere avanceret, du kunne tilføje et billede, der er vandret centreret, 20px fra toppen af dets beholder, ikke gentaget og fastgjort på plads som websiden ruller:

 krop {
 Baggrund: URL (image.png) center 20px no-repeat Fixed;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Et billede som baggrund (BEMÆRK: Undgå dette lave niveau i kontrast i dine egne designs)

Hvis du ønskede at skrive det ud uden at bruge baggrund Shorthand, det ville se sådan ud:

 krop {
 BAGGRUND-billede: URL (image.png);
 Baggrundsposition: Center 20px;
 BAGGRUND-Gentag: NO-Gentag;
 Baggrundstilstand: Fast;
 }

Hvis du vil tilføje flere baggrunde til et element, kan du COMA-separate værdisæt i CSS-erklæringen. Bemærk, at hvilket emne der er angivet først, er øverst på stakken, hvilket betyder, at det vil blive vist 'over' andre baggrunde.

 krop {
 Baggrund: URL (image.png) Center 20px No-Repeat Fixed, URL (Image-2.png) Center Center No-Repeat Fixed;
 }

I dette tilfælde vises et billede som i det foregående eksempel, og den ene 'nedenfor' direkte i midten af indholdsområdet.

Ændre størrelse Baggrundsbilleder

Hidtil har vi undgået baggrundsstørrelse. . Men det er ret vigtigt, fordi det giver dig mulighed for at styre størrelsen af et baggrundsbillede. Specifikt kan du definere de vandrette og lodrette dimensioner af et billede i pixels eller procentvise vilkår, såsom:

 Baggrundsstørrelse: 200px 50px;

Der er også to søgeordsværdier, som kan bruges i stedet: indeholde og dække over . Disse er stort set ens, for at give en måde at skalle et billede i et elements indholdsområde. Forskellen er det indeholde er designet til at gøre et billede så stort som muligt, mens du stadig viser alt i indholdsområdet (hvilket betyder at du normalt får huller omkring det), mens dække over Helt dækker indholdsområdet, men kan resultere i, at nogle af billedet ikke er synligt. Sidstnævnte bruges almindeligvis på websteder, der bruger fotografier som baggrunde.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'indeholder' (top) versus 'cover' (nederste) værdier

Bemærk, at du kan tilføje baggrundsstørrelse. til A. baggrund Shorthand Definition - Placer det efter BAGGRUNDPOSITION. Værdier, med et fremad skråstreg, der adskiller de to:

 Baggrund: URL (image.png) center 20px / indeholder no-repeat Fixed

Brug High-Res Retina Baggrundsbilleder

Når du tilføjer High-Res Retina Baggrunde, baggrundsstørrelse. er også nyttig til at tvinge sådanne billeder til at vises i den korrekte størrelse.

For eksempel, forestil dig en Div. med AN. ID. af logo. . Dette, hensigtsmæssigt, har et logo påført som baggrund i CSS. Det er 150 pixels firkantet, og så de grundlæggende CSS du vil bruge er:

 #logo {
 Bredde: 150px;
 Højde: 150px;
 Baggrund: URL (logo.png) nej-gentagelse;
 }

High-res komplicerer tingene. Vi ønsker ikke at tvinge ældre hardware til at indlæse større billeder, og så skal en medieforespørgsel bruges til kun at indlæse logoet for højere opløsning på understøttet hardware.

 @media (-webkit-min-enhed-pixel-forhold: 2),
 (min-opløsning: 192dpi) {
  #logo {
   Baggrundsbillede: URL ([email protected]);
  }
 }

Problemet nu er @ 2x høj-res billede er 300 pixels firkantet (da det har to gange opløsningen af originalen), men bruges som baggrunden for en 150 pixel-firkantet beholder. Så på dette tidspunkt ser du kun en fjerdedel af det.

A high-res image before a resize fix — Et høj-res billede før en resize fix

Dette er fastsat ved at tildele en bestemt baggrundsstørrelse. værdi for. #logo. :

 #logo {
 Bredde: 150px;
 Højde: 150px;
 Baggrund: URL (logo.png) nej-gentagelse;
 Baggrundsstørrelse: 150px 150px;
 }

High-res-logoet, nu tæt ind i dens beholder

En mere moderne metode til at arbejde med flere baggrundsopløsninger og opnå det samme resultat er CSS4's Image-Set. :

 #logo {
 BAGGRUND-billede: Billed-sæt (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

Fordelene ved Image-Set. er enklere CSS, og brugeragenten, der bestemmer det billede, der skal bruges. Ulempen er browserstøtte - på tidspunktet for skrivningen - forbliver ufuldstændig. Besøg denne testside For et hurtigt middel til at kontrollere, hvordan browsere du støtter billetpris. (Dette er måske hvorfor mange designere Brug scripts til at automatisere servering high-res billeder .)

Arbejde med alfa-kanaler og gradienter

Vores endelige tip i denne flammende hurtigt (i websteds vejledning) artiklen vedrører alfa-kanaler og gradienter. Når internettet var dampdrevet, havde du ofte designere bruger 'checkerboard' gifs for at simulere alfa-kanaler (hver anden pixel var gennemsigtig). Nu tildeler du bare farver i RGBA:

 Main {
 Baggrund: RGBA (255,255,255,0,7);
 }

I ovenstående eksempel ville baggrunden være 70 pct. Hvid, hvilket tillader, hvad der er under det at vise igennem. Du skal være forsigtig med at bevare klarhed, når du bruger halvgennemsigtige baggrunde, der er over komplekse billeder, men de kan være gode til at tilføje visuel interesse til websider.

Alpha channels, gradients, and some questionable colour choices — Alfa-kanaler, gradienter og nogle tvivlsomme farvevalg

Tilsvarende plejede webdesignere til udgang og flise GIFS, hvis de ønskede en gradient som baggrund, men det er heller ikke længere nødvendigt, medmindre du vil feste som det er 1999. I disse dage vil du vil have CSS3 lineær-gradient. og radial-gradient. Egenskaber, som du definerer anvisninger og farve stopper.

Her er en CSS-regel med en grundlæggende gradient:

 H1 {
 Baggrund: Lineær-gradient (til højre, RGBA (255.255.255,1), RGBA (255,255,255,0));
}

Dette ville blive anvendt på niveau-én overskrifter, hvilket giver dem en lineær gradient, der går fra venstre mod højre, begyndende med solid hvid og slutter i gennemsigtig hvid.

Brug af vinkler og flere farver stopper, kan du gå meget, meget længere med gradienter. For at eksperimentere, prøv at bruge en Photoshop-lignende CSS gradient generator. og undersøge kodenudgangen (være opmærksom på det linkede eksempel tilføjer syntaks til ældre browsere - bare tag fat i lineær-gradient. linje til eget brug).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Som CSS Patterns Gallery viser, kan du gøre rigtig fancy ting med CSS gradienter

Hvis du har lyst til at tjekke, hvilke erfarne web-professionelle kan gøre med gradienter og baggrundsstørrelse. , tjek Lea Verou's CSS3 Mønstre Galleri . Der vil du finde masser af live eksempler, der bruger CSS gradienter til at skabe alle former for alvorligt imponerende baggrundsmønstre.

Og ja, der er et strejf af, hvor vi kom ind med hensyn til eyeball overgreb i nogle af dem.Men som med alt, når det kommer til web baggrunde, er nøglen at sikre, hvad du tilføjer, er relevant i forbindelse med dit design og - vigtigst af alt - den baggrunde ikke distraherer fra indhold eller gør det ulæseligt.

Relaterede links:

En guide til at skrive bedre CSS
Skabe et lydhørt layout med CSS-grid
CSS-tricks til at revolutionere dine layouts

Sådan tilføjes sjov CSS-baggrunde til dine websteder

Tilføj CSS baggrunde til websideelementer

Ændre størrelse Baggrundsbilleder

Brug High-Res Retina Baggrundsbilleder

Arbejde med alfa-kanaler og gradienter

hvordan - Mest populære artikler

Sådan rengøres pensler: Den endelige vejledning

Sådan ændres du et billede i Photoshop

Sådan opretter du en app med vue.js

Brug Chart.js til at dreje data til interaktive diagrammer

Sådan laver du og bruger en mahlstick til maleri

Brug af vektorværktøjer: En webdesigner tilgang

Sådan får du mere fra GIFS

Lav en hi-troskab prototype i atomisk

Kategorier