Hintergrundbezogene CSS-Eigenschaften

Articles

Dieser Artikel erklärt die hintergrundbezogenen CSS-Eigenschaften.

Sie können lernen, wie man Eigenschaften wie Hintergrundeinstellung, Position und Wiederholung beschreibt.

YouTube Video

Erstellen von HTML für die Vorschau

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>

Hintergrund und Dekoration

`background-color`-Eigenschaft

 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}

Die background-color-Eigenschaft wird in CSS verwendet, um die Hintergrundfarbe eines Elements festzulegen. Sie können die Farbe festlegen, die hinter Text und anderen Elementen angezeigt wird, und die Farben können in verschiedenen Formaten definiert werden. Die Methode zum Festlegen von Farben ähnelt der color-Eigenschaft, aber Sie können auch einen vollständig transparenten Hintergrund mit transparent angeben.

Erklärung:

red-example-Klasse gibt die Hintergrundfarbe als Rot mithilfe eines Schlüsselworts an.
hex-example-Klasse gibt die Hintergrundfarbe mit einem hexadezimalen Code an.
rgb-example-Klasse gibt die Hintergrundfarbe im RGB-Format an.
rgba-example-Klasse gibt die Hintergrundfarbe im RGBA-Format an und fügt Transparenz hinzu.
hsl-example-Klasse gibt die Hintergrundfarbe im HSL-Format an.
hsla-example-Klasse gibt die Hintergrundfarbe im HSLA-Format an und fügt Transparenz hinzu.
transparent-example-Klasse setzt den Hintergrund auf transparent.

`background-image`-Eigenschaft

 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}

Die background-image-Eigenschaft wird verwendet, um ein Bild als Hintergrund eines Elements festzulegen. Das angegebene Bild wird als Hintergrund des Elements angezeigt, und seine Größe, Position und Wiederholungsmethode können mit anderen verwandten Eigenschaften angepasst werden. Wir werden später auch verwandte Eigenschaften wie background-size, background-position und background-repeat erklären.

Erklärung:

background-image-example-Klasse verwendet die Eigenschaft background-image, um image.jpg als Hintergrund festzulegen. background-size: cover lässt das Bild das gesamte Element ausfüllen, und background-position: center zentriert das Bild. Wiederholung wird mit background-repeat: no-repeat deaktiviert.
Die Klasse background-image-gradient verwendet linear-gradient(), um einen Hintergrundverlauf von Rot zu Blau festzulegen. Der Verlauf wird von links nach rechts angezeigt.

Arten von Werten, die angegeben werden können

Die Eigenschaft background-image kann die folgenden Werte annehmen.

url(): Gibt die URL des Hintergrundbilds an. Fügen Sie die Bilddatei in url() ein. (ex.url('image.jpg'))
none: Gibt an, dass kein Hintergrundbild festgelegt wird. Dies ist der Standardwert.
Verläufe: Es ist auch möglich, Verläufe als Hintergrundbilder mithilfe von CSS-Verlaufsfunktionen festzulegen. (ex.linear-gradient(), radial-gradient())

Wichtige Punkte der Eigenschaft `background-image`

Bildgröße und Positionierung: Die Größe und Positionierung von Hintergrundbildern kann mit anderen Eigenschaften genau gesteuert werden, sodass Designanpassungen möglich sind. Zum Beispiel dehnt background-size: cover das Bild so aus, dass es den gesamten Bereich abdeckt und ein Beschneiden vermieden wird.
Verwendung von Farbverläufen: Anstelle eines Bildes können Sie einen Farbverlauf als Hintergrund verwenden und so ein dynamisches Element zum Design hinzufügen.

Eigenschaft `background-position`

 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}

Die Eigenschaft background-position wird verwendet, um die Position eines Hintergrundbilds innerhalb eines Elements anzugeben. Indem Sie steuern, wo das Hintergrundbild innerhalb des Elements erscheint, können Sie Layouts erstellen, die Ihrem Design entsprechen. Der Standardwert ist 0% 0%, wodurch das Bild in der oberen linken Ecke positioniert wird.

Erklärung:

top-left-example-Klasse legt die Bildposition als oben links fest und platziert das Bild in der oberen linken Ecke.
center-example-Klasse positioniert das Bild in der Mitte mit dem Attribut center.
bottom-right-example-Klasse legt die Bildposition als unten rechts fest und platziert das Bild in der unteren rechten Ecke.

Arten von Werten, die angegeben werden können

Die Eigenschaft background-position kann die folgenden Arten von Werten annehmen.

Schlüsselwörter: Sie können left, right, top, bottom, center angeben.
- Die Angabe von center positioniert das Hintergrundbild in der Mitte des Elements.
- Die Angabe von right positioniert das Hintergrundbild auf der rechten Seite.
- Die Angabe von top left positioniert das Hintergrundbild in der oberen linken Ecke.
- Die Angabe von bottom right platziert das Hintergrundbild in der unteren rechten Ecke.
Länge oder Prozentwert: Sie können Werte wie 10px 20px oder 50% 50% angeben.
- Die Angabe von 10px 20px platziert das Hintergrundbild 10px von links und 20px von oben.
- Die Angabe von 50% 50% zentriert das Hintergrundbild sowohl horizontal als auch vertikal.
calc()-Funktion: Ermöglicht eine genauere Positionierung durch CSS-Berechnungen.

Die Eigenschaft `background-size`

 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}

Die Eigenschaft background-size wird verwendet, um die Größe eines Hintergrundbildes für ein Element festzulegen. Mit dieser Eigenschaft können Sie einstellen, wie das Hintergrundbild angezeigt wird, ob es das gesamte Element füllt oder seine Originalgröße beibehält, um zum Design zu passen. Der Standardwert ist auto, was die Originalgröße des Hintergrundbildes beibehält.

Erklärung:

cover-example-Klasse gibt cover an. Das Bild wird vergrößert, um das gesamte Element zu bedecken, aber Teile davon könnten abgeschnitten werden.
contain-example-Klasse gibt contain an. Das Bild wird so angepasst, dass es in das Element passt, aber es könnte Leerraum entstehen.
fixed-size-example-Klasse gibt eine feste Größe für das Hintergrundbild an und legt die Breite und Höhe jeweils auf 100px fest.

Arten von Werten, die angegeben werden können

Die background-size-Eigenschaft kann die folgenden Arten von Werten zugewiesen bekommen.

Schlüsselwörter
- auto: Beibehaltung der Standardgröße des Bildes (Breite und Höhe werden automatisch bestimmt).
- cover: Passt die Größe des Hintergrundbildes an, um das Element vollständig abzudecken. Das Bild füllt das gesamte Element aus, aber Teile davon könnten abgeschnitten werden.
- contain: Passt das Bild so an, dass es in das Element passt, aber das gesamte Element nicht abdeckt. Das Seitenverhältnis des Bildes bleibt erhalten.
Numerische Werte (px, %, em, usw.)
- Breite und Höhe: Geben Sie die Breite und Höhe ausdrücklich an. Wenn nur ein Wert angegeben wird, gilt er für die Breite, und die Höhe wird automatisch angepasst.
- Prozentwert: Geben Sie die Größe des Hintergrundbildes als Prozentsatz der Elementgröße an. Zum Beispiel: 50% 50% passt das Bild so an, dass es die Hälfte der Breite und Höhe des Elements einnimmt.

`background-repeat`-Eigenschaft

 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}

Die background-repeat-Eigenschaft wird verwendet, um zu steuern, wie das Hintergrundbild eines Elements wiederholt wird. Standardmäßig wird das Hintergrundbild horizontal und vertikal innerhalb des Elements wiederholt, aber Sie können das Wiederholungsverhalten mit dieser Eigenschaft anpassen.

Erklärung:

repeat-example-Klasse zeigt das Bild sowohl vertikal als auch horizontal wiederholt an.
repeat-x-example-Klasse wiederholt das Bild nur horizontal.
no-repeat-example-Klasse zeigt das Bild nur einmal an, ohne es zu wiederholen.
space-example-Klasse ordnet die Hintergrundbilder gleichmäßig mit gleichen Abständen dazwischen an.
round-example-Klasse passt die Größe des Hintergrundbilds automatisch an, um es zu wiederholen und das gesamte Element auszufüllen.

Spezifizierbare Werte

Die background-repeat-Eigenschaft kann die folgenden Arten von Werten zugewiesen bekommen.

repeat: Das Hintergrundbild wird sowohl entlang der X-Achse (horizontal) als auch der Y-Achse (vertikal) wiederholt. Dies ist der Standardwert.
repeat-x: Das Hintergrundbild wird nur entlang der X-Achse (horizontal) wiederholt.
repeat-y: Das Hintergrundbild wird nur entlang der Y-Achse (vertikal) wiederholt.
no-repeat: Das Hintergrundbild wird nicht wiederholt und nur einmal angezeigt.
space: Das Hintergrundbild wird in regelmäßigen Abständen wiederholt, mit gleichmäßiger Verteilung des Abstands dazwischen.
round: Das Hintergrundbild wird wiederholt, aber die Größe wird angepasst, um das gesamte Element zu füllen. Das Bild kann in der Größe angepasst werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften im Zusammenhang mit dem Boxmodell CSS-Eigenschaften im Zusammenhang mit der Dekoration des Box-Modells

Hintergrundbezogene CSS-Eigenschaften

YouTube Video

Erstellen von HTML für die Vorschau

Hintergrund und Dekoration

background-color-Eigenschaft

Erklärung:

background-image-Eigenschaft

Erklärung:

Arten von Werten, die angegeben werden können

Wichtige Punkte der Eigenschaft background-image

Eigenschaft background-position

Erklärung:

Arten von Werten, die angegeben werden können

Die Eigenschaft background-size

Erklärung:

Arten von Werten, die angegeben werden können

background-repeat-Eigenschaft

Erklärung:

Spezifizierbare Werte

YouTube Video

`background-color`-Eigenschaft

`background-image`-Eigenschaft

Wichtige Punkte der Eigenschaft `background-image`

Eigenschaft `background-position`

Die Eigenschaft `background-size`

`background-repeat`-Eigenschaft