Baggrundsrelaterede CSS-egenskaber

Articles

Denne artikel forklarer baggrundsrelaterede CSS-egenskaber.

Du kan lære, hvordan egenskaber som baggrundsindstilling, position og gentagelse beskrives.

YouTube Video

Oprettelse af HTML til forhåndsvisning

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Baggrund og dekoration

`background-color`-egenskab

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

background-color-egenskaben bruges i CSS til at angive baggrundsfarven på et element. Du kan angive farven, der vises bag tekst og andre elementer, og farver kan defineres i forskellige formater. Metoden til at angive farver ligner color-egenskaben, men du kan også angive en fuldstændig gennemsigtig baggrund ved hjælp af transparent.

Forklaring:

red-example klassen angiver baggrundsfarven som rød ved hjælp af et nøgleord.
hex-example klassen angiver baggrundsfarven ved hjælp af en hexadecimalkode.
rgb-example klassen angiver baggrundsfarven ved hjælp af RGB-format.
rgba-example klassen angiver baggrundsfarven ved hjælp af RGBA-format, med tilføjelse af gennemsigtighed.
hsl-example klassen angiver baggrundsfarven ved hjælp af HSL-format.
hsla-example klassen angiver baggrundsfarven ved hjælp af HSLA-format, med tilføjelse af gennemsigtighed.
transparent-example klassen indstiller baggrunden til gennemsigtig.

`background-image`-egenskab

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

background-image-egenskaben bruges til at sætte et billede som baggrund for et element. Det angivne billede vises som baggrund for elementet, og dets størrelse, position og gentagelsesmetode kan justeres ved hjælp af andre relaterede egenskaber. Vi vil også forklare relaterede egenskaber som background-size, background-position og background-repeat senere.

Forklaring:

background-image-example klassen bruger background-image-egenskaben til at sætte image.jpg som baggrund. background-size: cover gør, at billedet dækker hele elementet, og background-position: center centrerer billedet. Gentagelse er deaktiveret med background-repeat: no-repeat.
Klassen background-image-gradient bruger linear-gradient() til at sætte en baggrundsgradient fra rød til blå. Gradienten vises fra venstre mod højre.

Typer af værdier, der kan specificeres

background-image-egenskaben kan tage følgende værdier.

url(): Angiver URL'en til baggrundsbilledet. Inkluder bildefilen i url(). (ex.url('image.jpg'))
none: Angiver, at der ikke skal angives et baggrundsbillede. Dette er standardværdien.
Gradienter: Det er også muligt at bruge gradienter som baggrundsbilleder ved hjælp af CSS gradient-funktioner. (ex.linear-gradient(), radial-gradient())

Nøglepunkter for egenskaben `background-image`

Billedstørrelse og placering: Størrelsen og placeringen af baggrundsbilleder kan finjusteres med andre egenskaber, hvilket giver mulighed for designjusteringer. For eksempel strækker background-size: cover billedet, så det dækker hele området, og undgår derved beskæring.
Brug af gradienter: I stedet for et billede kan du bruge en gradient som baggrund, hvilket tilføjer et dynamisk element til designet.

`background-position`-egenskab

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

background-position-egenskaben bruges til at angive positionen af et baggrundsbillede inden for et element. Ved at styre, hvor baggrundsbilledet vises inden for elementet, kan du skabe layouts, der passer til dit design. Standardværdien er 0% 0%, hvilket placerer billedet i øverste venstre hjørne.

Forklaring:

top-left-example klassen angiver billedets position som top left, hvilket placerer billedet i øverste venstre hjørne.
center-example klassen placerer billedet i midten ved hjælp af attributten center.
bottom-right-example klassen angiver billedets position som bottom right, hvilket placerer billedet i nederste højre hjørne.

Typer af værdier, der kan specificeres

background-position-egenskaben kan tage følgende typer værdier.

Nøgleord: Du kan angive left, right, top, bottom, center.
- Ved at angive center placeres baggrundsbilledet i midten af elementet.
- Ved at angive right placeres baggrundsbilledet på højre side.
- Ved at angive top left placeres baggrundsbilledet i øverste venstre hjørne.
- Angivelse af bottom right placerer baggrundsbilledet i nederste højre hjørne.
Længde eller procent: Du kan angive værdier som 10px 20px, 50% 50%.
- Angivelse af 10px 20px placerer baggrundsbilledet 10px fra venstre og 20px fra toppen.
- Angivelse af 50% 50% centrerer baggrundsbilledet både horisontalt og vertikalt.
calc()-funktionen: Muliggør mere præcis placering ved hjælp af CSS-beregninger.

`background-size`-egenskaben

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

background-size-egenskaben bruges til at angive størrelsen på et baggrundsbillede for et element. Ved at bruge denne egenskab kan du justere, hvordan baggrundsbilledet vises, om det fylder hele elementet eller bevarer sin originale størrelse for at passe til designet. Standardværdien er auto, som bevarer baggrundsbilledets oprindelige størrelse.

Forklaring:

cover-example klassen angiver cover. Billedet forstørres for at dække hele elementet, men dele kan blive beskåret.
contain-example klassen angiver contain. Billedet justeres for at passe inden for elementet, men noget tom plads kan forekomme.
fixed-size-example klassen angiver en fast størrelse for baggrundsbilledet, ved at sætte bredden og højden til hver 100px.

Typer af værdier, der kan specificeres

background-size egenskaben kan tildeles følgende typer værdier.

Nøgleord
- auto: Bevarer den oprindelige størrelse på billedet (bredde og højde bestemmes automatisk).
- cover: Justerer størrelsen på baggrundsbilledet for at dække hele elementet. Det vil fylde hele elementet, men dele af billedet kan blive beskåret.
- contain: Justerer billedet til at passe inden for elementet, men dækker ikke hele elementet. Billedets størrelsesforhold bevares.
Numeriske værdier (px, %, em osv.)
- Bredde og højde: Angiv bredde og højde eksplicit. Hvis kun én værdi er angivet, gælder den for bredden, og højden justeres automatisk.
- Procent: Angiv størrelsen på baggrundsbilledet som en procentdel af elementets størrelse. For eksempel sætter 50% 50% billedet til halvdelen af elementets bredde og højde.

`background-repeat`-egenskab

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

background-repeat-egenskaben bruges til at styre, hvordan et elements baggrundsbillede gentages. Som standard gentages baggrundsbilledet horisontalt og vertikalt indenfor elementet, men du kan tilpasse gentagelsesadfærden ved hjælp af denne egenskab.

Forklaring:

repeat-example klassen viser billedet gentaget både vertikalt og horisontalt.
repeat-x-example klassen gentager billedet kun horisontalt.
no-repeat-example klassen viser billedet kun én gang uden gentagelse.
space-example klassen placerer baggrundsbillederne jævnt med lige meget plads mellem dem.
round-example klassen ændrer automatisk størrelsen på baggrundsbilledet for at gentage og fylde hele elementet.

Værdier der kan angives

background-repeat egenskaben kan tildeles følgende typer værdier.

repeat: Baggrundsbilledet gentages både langs X-aksen (horisontal) og Y-aksen (vertikal). Dette er standardværdien.
repeat-x: Baggrundsbilledet gentages kun langs X-aksen (horisontal).
repeat-y: Baggrundsbilledet gentages kun langs Y-aksen (vertikal).
no-repeat: Baggrundsbilledet gentages ikke og vises kun én gang.
space: Baggrundsbilledet gentages med regelmæssige intervaller og lige mellemrum imellem.
round: Baggrundsbilledet gentages, men størrelsen tilpasses for at udfylde hele elementet. Billedet kan blive ændret i størrelse.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-egenskaber relateret til boksmodellen CSS-egenskaber relateret til boksmodeldekoration

Baggrundsrelaterede CSS-egenskaber

YouTube Video

Oprettelse af HTML til forhåndsvisning

Baggrund og dekoration

background-color-egenskab

Forklaring:

background-image-egenskab

Forklaring:

Typer af værdier, der kan specificeres

Nøglepunkter for egenskaben background-image

background-position-egenskab

Forklaring:

Typer af værdier, der kan specificeres

background-size-egenskaben

Forklaring:

Typer af værdier, der kan specificeres

background-repeat-egenskab

Forklaring:

Værdier der kan angives

YouTube Video

`background-color`-egenskab

`background-image`-egenskab

Nøglepunkter for egenskaben `background-image`

`background-position`-egenskab

`background-size`-egenskaben

`background-repeat`-egenskab