Bakgrunnsrelaterte CSS-egenskaper

Articles

Denne artikkelen forklarer bakgrunnsrelaterte CSS-egenskaper.

Du kan lære hvordan du beskriver egenskaper som bakgrunnsinnstilling, posisjon og repetisjon.

YouTube Video

Opprette HTML for 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>

Bakgrunn og dekorasjon

`background-color`-egenskapen

 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-egenskapen brukes i CSS for å angi bakgrunnsfargen til et element. Du kan angi fargen som vises bak tekst og andre elementer, og farger kan defineres i ulike formater. Metoden for å angi farger er lik color-egenskapen, men du kan også angi en helt gjennomsiktig bakgrunn ved å bruke transparent.

Forklaring:

red-example-klassen angir bakgrunnsfargen som rød ved å bruke et nøkkelord.
hex-example-klassen angir bakgrunnsfargen ved å bruke en heksadesimal kode.
rgb-example-klassen angir bakgrunnsfargen ved å bruke RGB-format.
rgba-example-klassen angir bakgrunnsfargen ved å bruke RGBA-format, og legger til gjennomsiktighet.
hsl-example-klassen angir bakgrunnsfargen ved å bruke HSL-format.
hsla-example-klassen angir bakgrunnsfargen ved å bruke HSLA-format, og legger til gjennomsiktighet.
transparent-example-klassen setter bakgrunnen til gjennomsiktig.

`background-image`-egenskapen

 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-egenskapen brukes for å sette et bilde som bakgrunnen til et element. Det angitte bildet vises som bakgrunnen til elementet, og størrelsen, posisjonen og repeteringsmetoden kan justeres med andre relaterte egenskaper. Vi vil også forklare relaterte egenskaper som background-size, background-position og background-repeat senere.

Forklaring:

background-image-example-klassen bruker background-image-egenskapen til å sette image.jpg som bakgrunn. background-size: cover gir bildet muligheten til å dekke hele elementet, og background-position: center sentrerer bildet. Repetisjon er deaktivert med background-repeat: no-repeat.
Klassen background-image-gradient bruker linear-gradient() for å sette en bakgrunnsgradient fra rød til blå. Gradienten vises fra venstre til høyre.

Typer verdier som kan spesifiseres

background-image-egenskapen kan ta følgende verdier.

url(): Angir URL-en til bakgrunnsbildet. Inkluder bildefilen innenfor url(). (ex.url('image.jpg'))
none: Angir at bakgrunnsbilde ikke skal settes. Dette er standardverdien.
Gradienter: Det er også mulig å bruke gradienter som bakgrunnsbilder ved hjelp av CSS-gradientfunksjoner. (ex.linear-gradient(), radial-gradient())

Viktige punkter for `background-image`-egenskapen.

Bilde-størrelse og -plassering: Størrelsen og plasseringen av bakgrunnsbilder kan kontrolleres nøye med andre egenskaper, noe som muliggjør designjusteringer. For eksempel, ved å spesifisere background-size: cover, strekkes bildet for å dekke hele området og fjerner eventuelle avkuttede kanter.
Bruke gradienter: I stedet for et bilde kan du bruke en gradient som bakgrunn, noe som gir et dynamisk element til designet.

`background-position`-egenskap

 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-egenskapen brukes til å spesifisere posisjonen til et bakgrunnsbilde innenfor et element. Ved å kontrollere hvor bakgrunnsbildet vises i elementet, kan du lage layout som passer designet ditt. Standardverdien er 0% 0%, som plasserer bildet i øverste venstre hjørne.

Forklaring:

top-left-example-klassen angir bildeposisjonen som top left, og plasserer bildet i øvre venstre hjørne.
center-example-klassen plasserer bildet i midten ved å bruke center-attributtet.
bottom-right-example-klassen angir bildeposisjonen som bottom right, og plasserer bildet i nedre høyre hjørne.

Typer verdier som kan spesifiseres

background-position-egenskapen kan ta følgende typer verdier.

Nøkkelord: Du kan spesifisere left, right, top, bottom, center.
- Ved å spesifisere center plasseres bakgrunnsbildet i midten av elementet.
- Ved å spesifisere right plasseres bakgrunnsbildet på høyre side.
- Ved å spesifisere top left plasseres bakgrunnsbildet i øverste venstre hjørne.
- Angi bottom right vil plassere bakgrunnsbildet i nederste høyre hjørne.
Lengde eller prosent: Du kan angi verdier som 10px 20px, 50% 50%.
- Angi 10px 20px vil plassere bakgrunnsbildet 10px fra venstre og 20px fra toppen.
- Angi 50% 50% vil sentrere bakgrunnsbildet både horisontalt og vertikalt.
calc()-funksjon: Tillater mer presis plassering ved hjelp av CSS-beregninger.

`background-size`-egenskapen

 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-egenskapen brukes til å spesifisere størrelsen på et bakgrunnsbilde for et element. Ved å bruke denne egenskapen kan du justere hvordan bakgrunnsbildet vises, enten det fyller hele elementet eller beholder originalstørrelsen for å passe til designet. Standardverdien er auto, som beholder den opprinnelige størrelsen på bakgrunnsbildet.

Forklaring:

cover-example-klassen angir bakgrunnsinnstillingen cover. Bildet blir forstørret for å dekke hele elementet, men deler kan bli beskåret.
contain-example-klassen angir bakgrunnsinnstillingen contain. Bildet blir justert til å passe innenfor elementet, men noe tomrom kan oppstå.
fixed-size-example-klassen angir en fast størrelse for bakgrunnsbildet, og setter bredden og høyden til 100px hver.

Typer verdier som kan spesifiseres

background-size-egenskapen kan tilordnes følgende typer verdier.

Nøkkelord
- auto: Beholder standardstørrelsen på bildet (bredde og høyde bestemmes automatisk).
- cover: Justerer størrelsen på bakgrunnsbildet for å dekke hele elementet. Det vil fylle hele elementet, men deler av bildet kan bli beskåret.
- contain: Justerer bildet til å passe innenfor elementet, men dekker ikke hele elementet. Bildets sideforhold opprettholdes.
Numeriske verdier (px, %, em, etc.)
- Bredde og høyde: Spesifiser bredden og høyden eksplisitt. Hvis kun én verdi er spesifisert, gjelder den for bredden, og høyden justeres automatisk.
- Prosent: Spesifiser størrelsen på bakgrunnsbildet som en prosentandel av elementets størrelse. For eksempel betyr 50% 50% at bildet settes til halvparten av bredden og høyden til elementet.

`background-repeat`-egenskap

 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-egenskapen brukes til å kontrollere hvordan bakgrunnsbildet til et element gjentas. Som standard gjentas bakgrunnsbildet horisontalt og vertikalt innenfor elementet, men du kan tilpasse gjentakelsesatferden ved å bruke denne egenskapen.

Forklaring:

repeat-example-klassen viser bildet repetert både vertikalt og horisontalt.
repeat-x-example-klassen repeterer bildet kun horisontalt.
no-repeat-example-klassen viser bildet kun én gang uten å repetere.
space-example-klassen plasserer bakgrunnsbildene jevnt med lik avstand mellom dem.
round-example-klassen endrer automatisk størrelsen på bakgrunnsbildet slik at det repeteres og fyller hele elementet.

Verdier som kan spesifiseres

background-repeat-egenskapen kan tilordnes følgende typer verdier.

repeat: Bakgrunnsbildet gjentas både langs X-aksen (horisontal) og Y-aksen (vertikal). Dette er standardverdien.
repeat-x: Bakgrunnsbildet gjentas kun langs X-aksen (horisontal).
repeat-y: Bakgrunnsbildet gjentas kun langs Y-aksen (vertikal).
no-repeat: Bakgrunnsbildet gjentas ikke og vises kun én gang.
space: Bakgrunnsbildet gjentas med jevne mellomrom, med like mellomrom mellom.
round: Bakgrunnsbildet gjentas, men størrelsen justeres for å fylle hele elementet. Bildet kan bli justert i størrelse.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper relatert til boksmodellen CSS-egenskaper relatert til dekorering av boksmodellen

Bakgrunnsrelaterte CSS-egenskaper

YouTube Video

Opprette HTML for forhåndsvisning

Bakgrunn og dekorasjon

background-color-egenskapen

Forklaring:

background-image-egenskapen

Forklaring:

Typer verdier som kan spesifiseres

Viktige punkter for background-image-egenskapen.

background-position-egenskap

Forklaring:

Typer verdier som kan spesifiseres

background-size-egenskapen

Forklaring:

Typer verdier som kan spesifiseres

background-repeat-egenskap

Forklaring:

Verdier som kan spesifiseres

YouTube Video

`background-color`-egenskapen

`background-image`-egenskapen

Viktige punkter for `background-image`-egenskapen.

`background-position`-egenskap

`background-size`-egenskapen

`background-repeat`-egenskap