LabEx
AnmeldenKostenlos beitreten

Hintergrundstile in CSS anwenden

CSSCSSBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab lernst du, wie du fortgeschrittene Hintergrundstile mit CSS anwenden kannst, wobei der Schwerpunkt auf der Verbesserung der Webseiten-Designs durch die Manipulation von Farben und Bildern liegt. Das Lab behandelt essentielle Techniken wie das Festlegen von Hintergrundfarben für HTML-Elemente, das Hinzufügen und Anpassen von Hintergrundbildern, die Kontrolle der Bildpositionierung und -wiederholung sowie die Kombination mehrerer Hintergrundeigenschaften, um visuell ansprechende Weblayouts zu erstellen.

Durch praktische, hand-on-Beispiele erkundest du verschiedene Methoden zur Angabe von Hintergrundfarben mit benannten Farben, Hexadezimalcodes und RGB-Funktionen sowie lernst, wie du Hintergrundbilder mit präzisen Anpassung und Positionierungstechniken integrierst. Am Ende dieses Labs wirst du praktische Kenntnisse im Umgang mit CSS-Hintergrundeigenschaften erworben haben, um dynamischere und ansprechendere Webseiten-Designs zu erstellen.

Setze Hintergrundfarbe für HTML-Elemente

In diesem Schritt lernst du, wie du mit CSS Hintergrundfarben für HTML-Elemente setzt. Hintergrundfarben sind ein grundlegender Weg, um das visuelle Design von Webseiten zu verbessern, indem du Farben zu verschiedenen Elementen hinzufügst.

Lass uns zunächst eine HTML-Datei erstellen, um die Hintergrundfarbstilgebung zu demonstrieren. Öffne die WebIDE und erstelle in das Verzeichnis ~/project eine neue Datei namens styles.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Color Example</title>
    <style>
      /* Wir werden hier unseren CSS hinzufügen */
    </style>
  </head>
  <body>
    <div class="box1">First Box</div>
    <div class="box2">Second Box</div>
    <p class="paragraph">This is a paragraph with a background color.</p>
  </body>
</html>

Lass uns nun etwas CSS hinzufügen, um Hintergrundfarben für verschiedene Elemente zu setzen. Aktualisiere den <style>-Abschnitt in der HTML-Datei:

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

In diesem Beispiel haben wir drei Wege demonstriert, um Hintergrundfarben anzugeben:

  1. Benannte Farbe (blue)
  2. Hexadezimal-Farbcode (#FF5733)
  3. RGB-Farbfunktion (rgb(200, 230, 255))

Speichere die Datei und öffne sie in einem Webbrowser, um die verschiedenen Hintergrundfarben, die auf die Elemente angewendet werden, zu sehen.

Füge Hintergrundbild mit Anpassung hinzu

In diesem Schritt lernst du, wie du Hintergrundbilder zu HTML-Elementen hinzufügst und deren Größe mit CSS steuerst. Wir werden auf dem vorherigen Beispiel aufbauen, indem wir die Datei styles.html im Verzeichnis ~/project ändern.

Zunächst musst du ein Beispielbild herunterladen. Verwende den folgenden Befehl im Terminal:

wget https://labex.io/courses/images/background-sample.jpg -O ~/project/background-sample.jpg

Aktualisiere nun die Datei styles.html mit dem folgenden Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Sizing</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Füllt den gesamten Container
    </div>
    <div class="image-container contain-background">
      Contain: Passt das gesamte Bild hinein
    </div>
    <div class="image-container custom-size-background">
      Custom Size: 200x150 Pixel
    </div>
  </body>
</html>

Dieses Beispiel zeigt drei verschiedene Wege, um die Größe von Hintergrundbildern anzupassen:

  1. background-size: cover; - Skaliert das Bild, um den gesamten Container zu überdecken
  2. background-size: contain; - Skaliert das Bild, um vollständig innerhalb des Containers zu passen
  3. background-size: 200px 150px; - Setzt eine bestimmte Pixelgröße für das Hintergrundbild

Wenn du diese HTML-Datei in einem Browser öffnest, wirst du drei verschiedene Techniken zur Anpassung der Hintergrundbildgröße sehen.

Positioniere Hintergrundbild

In diesem Schritt lernst du, wie du die Positionierung von Hintergrundbildern mit CSS steuerst. Wir werden die Datei styles.html im Verzeichnis ~/project weiter ändern, um verschiedene Techniken zur Hintergrundpositionierung zu demonstrieren.

Aktualisiere die Datei styles.html mit dem folgenden Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Positioning</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Top Left Position</div>
    <div class="image-container center">Center Position</div>
    <div class="image-container bottom-right">Bottom Right Position</div>
    <div class="image-container custom-position">Custom Position (20% 80%)</div>
  </body>
</html>

Dieses Beispiel zeigt vier verschiedene Wege, um Hintergrundbilder zu positionieren:

  1. background-position: top left; - Positioniert das Bild in der oberen linken Ecke
  2. background-position: center; - Zentriert das Bild innerhalb des Containers
  3. background-position: bottom right; - Positioniert das Bild in der unteren rechten Ecke
  4. background-position: 20% 80%; - Verwendet Prozentwerte für eine benutzerdefinierte Positionierung

Wenn du diese HTML-Datei in einem Browser öffnest, wirst du sehen, wie unterschiedliche Positionierungsangaben die Platzierung des Hintergrundbilds beeinflussen.

Kontrolliere die Wiederholung von Hintergrundbildern

In diesem Schritt lernst du, wie du die Wiederholung von Hintergrundbildern mit der CSS-Eigenschaft background-repeat steuerst. Wir werden die Datei styles.html im Verzeichnis ~/project weiter ändern, um verschiedene Wiederholungstechniken zu demonstrieren.

Aktualisiere die Datei styles.html mit dem folgenden Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Repetition</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (Standard)</div>
    <div class="image-container repeat-x">Repeat X (Horizontal)</div>
    <div class="image-container repeat-y">Repeat Y (Vertikal)</div>
    <div class="image-container no-repeat">No Repeat</div>
  </body>
</html>

Dieses Beispiel zeigt vier verschiedene Techniken zur Wiederholung von Hintergrundbildern:

  1. background-repeat: repeat; - Wiederholt das Bild sowohl horizontal als auch vertikal (Standard)
  2. background-repeat: repeat-x; - Wiederholt das Bild nur horizontal
  3. background-repeat: repeat-y; - Wiederholt das Bild nur vertikal
  4. background-repeat: no-repeat; - Verhindert die Wiederholung des Bilds

Wenn du diese HTML-Datei in einem Browser öffnest, wirst du sehen, wie unterschiedliche Wiederholungswerte die Anzeige des Hintergrundbilds beeinflussen.

Kombiniere mehrere Hintergrundeigenschaften

In diesem Schritt lernst du, wie du mehrere Hintergrundeigenschaften kombinierst, um komplexere und interessantere Hintergrunddesigns zu erstellen. Wir werden die Datei styles.html im Verzeichnis ~/project ändern, um fortgeschrittene Hintergrundstiltechniken zu demonstrieren.

Aktualisiere die Datei styles.html mit dem folgenden Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Background Properties</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image:
          url("small-pattern.png"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay Background with Image
    </div>
    <div class="image-container layered-backgrounds">
      Layered Background with Pattern and Gradient
    </div>
  </body>
</html>

Zunächst lade ein kleines Musterbild herunter:

wget https://labex.io/courses/images/small-pattern.png -O ~/project/small-pattern.png

Dieses Beispiel zeigt zwei fortgeschrittene Hintergrundtechniken:

  1. Mehrere Hintergründe mit Überlagerung:

    • Verwendet einen linearen Farbverlauf, um eine halbtransparente Überlagerung zu erstellen
    • Kombiniert den Farbverlauf mit einem Hintergrundbild
    • Wendet konsistente Größenangaben, Positionierungen und Wiederholungen an

  2. Geschichtete Hintergründe:

    • Kombiniert ein wiederholendes Musterbild mit einem linearen Farbverlauf
    • Verwendet unterschiedliche Größenangaben und Positionierungen für jede Hintergrundschicht

Wenn du diese HTML-Datei in einem Browser öffnest, wirst du sehen, wie mehrere Hintergrundeigenschaften komplexe und visuell interessante Designs schaffen können.

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie man Hintergrundstile in CSS mit einem umfassenden, schrittweisen Ansatz anwendet. Das Lab hat essentielle Techniken für die Verbesserung der Webseitendesigns abgedeckt, darunter das Festlegen von Hintergrundfarben mit verschiedenen Methoden wie benannten Farben, hexadezimalen Codes und RGB-Funktionen sowie das Erkunden der Hintergrundbildmanipulation.

Die praktischen Übungen haben gezeigt, wie man Hintergrundbilder zu HTML-Elementen hinzufügt, ihre Größe, Position und Wiederholung steuert und mehrere Hintergrundeigenschaften kombiniert. Indem die Teilnehmer an praktischen Beispielen arbeiten, haben sie praktische Fähigkeiten erworben, um mit CSS visuell ansprechende und dynamische Webseitenhintergründe mit verschiedenen Styling-Techniken zu erstellen.

Verwandt CSS Kurse
Schnellstart mit CSS

Schnellstart mit CSS

CSS
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger
Erstellen eines Whack-a-Mole-Webspiels

Erstellen eines Whack-a-Mole-Webspiels

HTMLCSSJavaScript
Anfänger