Bakgrundsrelaterade CSS-egenskaper

Articles

Den här artikeln förklarar bakgrundsrelaterade CSS-egenskaper.

Du kan lära dig hur man beskriver egenskaper som bakgrundsinställningar, position och repetition.

YouTube Video

Skapa HTML för förhandsgranskning

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>

Bakgrund och Dekoration

`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 används i CSS för att ställa in bakgrundsfärgen på ett element. Du kan ange färgen som visas bakom text och andra element, och färger kan definieras i olika format. Metoden för att ange färger liknar color-egenskapen, men du kan även ange en helt genomskinlig bakgrund med transparent.

Förklaring:

red-example klassen anger bakgrundsfärgen som röd med ett nyckelord.
hex-example klassen anger bakgrundsfärgen med en hexadecimal kod.
rgb-example klassen anger bakgrundsfärgen med RGB-format.
rgba-example klassen anger bakgrundsfärgen med RGBA-format, med transparens.
hsl-example klassen anger bakgrundsfärgen med HSL-format.
hsla-example klassen anger bakgrundsfärgen med HSLA-format, med transparens.
transparent-example klassen gör bakgrunden transparent.

`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 används för att ställa in en bild som bakgrunden på ett element. Den angivna bilden visas som bakgrund på elementet, och dess storlek, position och upprepningsmetod kan justeras med andra relaterade egenskaper. Vi kommer även att förklara relaterade egenskaper som background-size, background-position och background-repeat senare.

Förklaring:

background-image-example klassen använder egenskapen background-image för att sätta image.jpg som bakgrund. background-size: cover gör att bilden täcker hela elementet, och background-position: center centrerar bilden. Upprepning inaktiveras med background-repeat: no-repeat.
background-image-gradient-klassen använder linear-gradient() för att skapa en bakgrundsgradient från röd till blå. Gradienten visas från vänster till höger.

Typer av värden som kan anges

background-image-egenskapen kan ha följande värden.

url(): Anger URL till bakgrundsbilden. Inkludera bildfilen inom url(). (ex.url('image.jpg'))
none: Anger att ingen bakgrundsbild ska anges. Det här är standardvärdet.
Gradients: Det är också möjligt att använda gradienter som bakgrundsbilder med hjälp av CSS-gradienteffekter. (ex.linear-gradient(), radial-gradient())

Viktiga punkter om `background-image`-egenskapen

Bildstorlek och positionering: Storleken och positionen för bakgrundsbilder kan justeras exakt med andra egenskaper, vilket möjliggör designjusteringar. Att till exempel ange background-size: cover sträcker ut bilden för att täcka hela området, vilket undviker beskärning.
Använda gradienter: Istället för en bild kan du använda en gradient som bakgrund och därmed lägga till ett dynamiskt element i designen.

`background-position`-egenskapen

 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 används för att ange positionen för en bakgrundsbild inom ett element. Genom att kontrollera var bakgrundsbilden visas inom elementet kan du skapa layout som passar din design. Standardvärdet är 0% 0%, vilket placerar bilden i det övre vänstra hörnet.

Förklaring:

top-left-example klassen anger bildens position som top left och placerar bilden i det övre vänstra hörnet.
center-example klassen placerar bilden i mitten med attributet center.
bottom-right-example klassen anger bildens position som bottom right och placerar bilden i det nedre högra hörnet.

Typer av värden som kan anges

background-position-egenskapen kan ha följande typer av värden.

Nyckelord: Du kan ange left, right, top, bottom, center.
- Att ange center kommer att placera bakgrundsbilden i mitten av elementet.
- Att ange right placerar bakgrundsbilden på högra sidan.
- Att ange top left kommer att placera bakgrundsbilden i det övre vänstra hörnet.
- Att ange bottom right placerar bakgrundsbilden i det nedersta högra hörnet.
Längd eller procent: Du kan ange värden som 10px 20px, 50% 50%.
- Att ange 10px 20px placerar bakgrundsbilden 10px från vänster och 20px från toppen.
- Att ange 50% 50% centrerar bakgrundsbilden både horisontellt och vertikalt.
calc()-funktionen: Möjliggör mer exakt positionering med hjälp av CSS-beräkningar.

`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 används för att specificera storleken på en bakgrundsbild för ett element. Med denna egenskap kan du anpassa hur bakgrundsbilden visas, om den fyller hela elementet eller behåller sin ursprungliga storlek, för att passa designen. Standardvärdet är auto, vilket behåller bakgrundsbildens ursprungliga storlek.

Förklaring:

cover-example klassen anger cover. Bilden förstoras för att täcka hela elementet, men delar kan beskäras.
contain-example klassen anger contain. Bilden justeras för att passa inom elementet, men tomma ytor kan uppstå.
fixed-size-example klassen anger en fast storlek för bakgrundsbilden, där bredden och höjden är 100px vardera.

Typer av värden som kan anges

background-size-egenskapen kan tilldelas följande typer av värden.

Nyckelord
- auto: Behåller bildens standardstorlek (bredd och höjd bestäms automatiskt).
- cover: Justerar bakgrundsbildens storlek för att helt täcka elementet. Den kommer att fylla hela elementet, men delar av bilden kan beskäras.
- contain: Justerar bilden för att passa inom elementet, men täcker inte hela elementet. Bildens proportioner bibehålls.
Numeriska värden (px, %, em, etc.)
- Bredd och höjd: Specificera bredd och höjd explicit. Om endast ett värde anges gäller det för bredden, och höjden justeras automatiskt.
- Procent: Ange bakgrundsbildens storlek som en procentandel av elementets storlek. Till exempel, 50% 50% ställer in bilden till hälften av elementets bredd och höjd.

`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 används för att styra hur bakgrundsbilden på ett element upprepas. Som standard upprepas bakgrundsbilden horisontellt och vertikalt inom elementet, men du kan anpassa upprepningsbeteendet med hjälp av denna egenskap.

Förklaring:

repeat-example klassen visar bilden upprepad både vertikalt och horisontellt.
repeat-x-example klassen upprepar bilden endast horisontellt.
no-repeat-example klassen visar bilden endast en gång utan upprepning.
space-example klassen placerar bakgrundsbilderna jämnt med lika stort utrymme mellan dem.
round-example klassen ändrar automatiskt storleken på bakgrundsbilden för att upprepas och fylla hela elementet.

Värden som kan anges

background-repeat-egenskapen kan tilldelas följande typer av värden.

repeat: Bakgrundsbilden upprepas längs både X-axeln (horisontellt) och Y-axeln (vertikalt). Det här är standardvärdet.
repeat-x: Bakgrundsbilden upprepas endast längs X-axeln (horisontellt).
repeat-y: Bakgrundsbilden upprepas endast längs Y-axeln (vertikalt).
no-repeat: Bakgrundsbilden upprepas inte och visas endast en gång.
space: Bakgrundsbilden upprepas med jämna mellanrum, med lika stort avstånd mellan.
round: Bakgrundsbilden upprepas, men storleken justeras för att fylla hela elementet. Bilden kan ändras i storlek.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper relaterade till boxmodellen CSS-egenskaper relaterade till boxmodellens dekoration

Bakgrundsrelaterade CSS-egenskaper

YouTube Video

Skapa HTML för förhandsgranskning

Bakgrund och Dekoration

background-color-egenskapen

Förklaring:

background-image-egenskapen

Förklaring:

Typer av värden som kan anges

Viktiga punkter om background-image-egenskapen

background-position-egenskapen

Förklaring:

Typer av värden som kan anges

background-size-egenskapen

Förklaring:

Typer av värden som kan anges

background-repeat-egenskap

Förklaring:

Värden som kan anges

YouTube Video

`background-color`-egenskapen

`background-image`-egenskapen

Viktiga punkter om `background-image`-egenskapen

`background-position`-egenskapen

`background-size`-egenskapen

`background-repeat`-egenskap