CSS-Kurs / Hintergrundfarben und Bilder: cover und contain

CSS-Hintergründe können ein Element mit Farbe oder einem Bild füllen, während der HTML-Inhalt unverändert bleibt. background-size: cover füllt den Bereich und kann das Bild zuschneiden; contain zeigt das ganze Bild und kann ungenutzten Raum lassen.

Verstehen Sie Hintergrundfarben und Hintergrundbilder

Die Hintergrundfarbe ist sichtbar, wo kein Bild vorhanden ist und hinter transparenten Bereichen. Die Hintergrundfarbe kann bestehen bleiben, selbst wenn das Bild nicht geladen wird. Das Hintergrundbild selbst ist nicht der Inhalt des Elements und erzeugt nicht automatisch die Höhe des Elements. Wenn Sie einfach die Bild-URL in ein leeres Div setzen und keine Höhe angeben, gibt es möglicherweise keinen Bereich zur Anzeige. Beim Anzeigen von aussagekräftigen Fotos als HTML-Inhalt vergleichen Sie mit dem Beispiel unter Verwendung von Responsive Bilder und Videos: aspect-ratio und object-fit.

.sample {
  height: 300px;
  background-color: #e8e8e8;
  background-image: url("images/landscape.webp");
}

Wenn das Bild selbst Informationen vermittelt, wie zum Beispiel ein Foto oder ein erklärendes Diagramm im Text, ist es angemessen, HTML img und alternativen Text zu verwenden. Sie können das alt-Attribut nicht direkt an ein CSS-Hintergrundbild anhängen. In der leeren Vergleichsbox dieser Lektion geben Sie einen Barrierefreiheitsnamen ein, der die Ergebnisse des Vergleichs beschreibt, aber Sie müssen nicht jedes Mal eine Rolle hinzufügen, wenn Sie den dekorativen Hintergrund in einem tatsächlichen Service verwenden. Geben Sie wichtige Beschreibungen nicht nur im Hintergrundbild an.

Bereiten Sie das Beispielbild und den Ordner vor

Öffnen Sie das 600×400 Übungshintergrundbild unten und speichern Sie es unter dem Namen landscape.webp. Verwenden Sie die Bäume links und rechts sowie den mittleren Kreis als Vergleichsobjekte. Setzen Sie das 3:2 Bild in ein quadratisches Feld, damit leicht zu erkennen ist, welche Teile abgeschnitten werden.

background-practice/
  backgrounds.html
  images/
    landscape.webp

Da das Beispiel sein CSS in backgrounds.html einbettet, wird images/landscape.webp aus diesem HTML-Dokument aufgelöst. Wenn Sie die Styles in css/style.css verschieben, verwenden Sie ../images/landscape.webp für dasselbe Bild. Relative URLs in externem CSS werden vom Stylesheet aus aufgelöst. Überprüfen Sie auch Dateinamen, Groß- und Kleinschreibung und Erweiterungen. Für weitere Details siehe die MDN-Referenz zu background-image und relativen Bildpfaden. Siehe CSS mit Inline-, internen und externen Styles anwenden.

Vergleichen Sie cover und contain

Diese Abmessungen gehen von einer Hintergrundfläche von 300 × 300, zentrierter Positionierung, ohne Wiederholung und ohne Rand oder Innenabstand aus. cover füllt die Fläche, indem ein Teil des Bildes abgeschnitten wird; contain bewahrt das gesamte Bild und zeigt die Hintergrundfarbe in ungenutztem Raum. Wenn das Bild und die Fläche dasselbe Verhältnis haben, können die beiden Ergebnisse identisch aussehen. Siehe MDN: Hintergrundgröße.

Der schematische Vergleich verwendet ein 3:2-Querformat, um die beiden Größenberechnungen zu veranschaulichen. Bei cover werden die Seiten abgeschnitten. Bei contain bleibt das gesamte Bild sichtbar und der graue Hintergrund erscheint darüber und darunter. Das komplette Beispiel ermöglicht es Ihnen, diese Effekte mit dem bereitgestellten Übungsbild zu vergleichen.

Wenn Sie cover·contain mit nur einem CSS-Verlauf vergleichen, der keine einzigartige Größe und kein Verhältnis hat, wird der Unterschied fast unsichtbar sein, da er denselben Bereich ausfüllt. Für Übungszwecke beim Zuschneiden verwenden Sie eine Bilddatei mit fester Größe und Verhältnis wie jetzt.

Steuern Sie Wiederholung und Position

.repeat {
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: left top;
}

.no-repeat {
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: left top;
}

background-size: 100px auto setzt die Breite auf 100px und die Höhe so, dass sie dem ursprünglichen Verhältnis entspricht. repeat füllt den Hintergrundbereich wiederholt mit einem kleinen Bild, no-repeat zeigt es nur einmal an. Aufgrund der grundlegenden Wiederholung kann das Bild sogar im leeren Bereich von contain wiederholt werden, also geben Sie no-repeat an, wenn Sie ein ganzes Bild vergleichen.

background-position legt die Kriterien für das Platzieren von Bildern fest. center teilt den verbleibenden Raum oder den zugeschnittenen Teil auf beide Seiten auf, und „left top“ richtet es basierend auf der oberen linken Ecke aus. Wenn Sie die Position bei cover ändern, ändert sich die Größe nicht, aber die abgeschnittene Seite ändert sich. Das Beispiel verwendet separate Eigenschaften, daher seien Sie vorsichtig, später nicht andere Einstellungen zu initialisieren, indem Sie die Kurzschreibweise background hinzufügen.

Führen Sie das vollständige Hintergrundbeispiel aus.

Speichern Sie den untenstehenden Code als UTF-8 in backgrounds.html im zuvor vorbereiteten Ordner und öffnen Sie ihn. Verwenden Sie dasselbe Bild in vier Boxen, um Größe und Wiederholung zu vergleichen. Wenn das Fenster schmal ist, wird die Boxbreite reduziert und die Höhe bleibt bei 300px, sodass die Größe des Ausschnitts und des leeren Raums ebenfalls neu berechnet wird.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing background image sizes</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }
    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;
      background-color: #e8e8e8; background-image: url("images/landscape.webp");
      background-position: center; background-repeat: no-repeat; }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }
    .no-repeat { background-size: 100px auto; background-position: left top; }
  </style>
</head>
<body>
  <h1>Comparing background images</h1>
  <h2>cover：Fill the box</h2><div class="sample cover" role="img" aria-label="Background with left and right sides cut out"></div>
  <h2>contain：Contains the entire picture</h2><div class="sample contain" role="img" aria-label="Background with empty space above and below"></div>
  <h2>repeat: small repetition</h2><div class="sample repeat" role="img" aria-label="Background with repeated small pictures"></div>
  <h2>no-repeat：Show small once</h2><div class="sample no-repeat" role="img" aria-label="Background with only one page displayed in the upper left corner"></div>
</body>
</html>

Ändern Sie jeweils nur eine Eigenschaft

1. Prüfen Sie in den Entwicklerwerkzeugen bei ausreichend breitem Fenster, dass die ersten beiden Boxen 300×300px messen. Vergleichen Sie den seitlichen Beschnitt bei cover und den Freiraum oben und unten bei contain.
2. Ändern Sie nur background-position der cover-Box zu left top. Links bleibt mehr vom Baum sichtbar, rechts wird mehr abgeschnitten. Stellen Sie danach center wieder her.
3. Ändern Sie background-repeat der contain-Box zu repeat. Prüfen Sie die Wiederholung im zuvor leeren Bereich und stellen Sie danach no-repeat wieder her.
4. Ändern Sie background-size von .no-repeat von 100px auto zu 100% 100%. Prüfen Sie die verzerrten Proportionen des mittleren Kreises und stellen Sie danach 100px auto wieder her.

Prüfen Sie fehlende Bilder und unerwarteten Beschnitt

• Öffnen Sie den Übungsbild-Link direkt, um sicherzustellen, dass die Originaldatei sichtbar ist. Überprüfen Sie den gespeicherten Dateinamen und die tatsächliche Erweiterung und berechnen Sie den Pfad gemäß dem HTML-/CSS-Standort.
• Überprüfen Sie die Bildanfrage im Netzwerk-Panel der Entwicklertools. Eine 404-Antwort erfordert eine Überprüfung des Pfads. Wenn die Antwort erfolgreich ist, das Bild jedoch unsichtbar bleibt, überprüfen Sie die Boxabmessungen und die angewendete Hintergrundbild-Deklaration.
• Wenn Sie möchten, dass es ohne leeren Raum ausgefüllt wird, prüfen Sie, ob background-size: cover angewendet wird. Um das gesamte Bild anzuzeigen, geben Sie contain und no-repeat zusammen an. Wenn die Figur gleichmäßig mit der Box skaliert wird, ist der Unterschied zwischen den beiden Werten gering.
• Wenn Sie einen Hintergrund hinter Ihren Text einfügen, stellen Sie sicher, dass der Text sowohl in hellen als auch in dunklen Bereichen lesbar ist. Da der Zweck dieser Lektion darin besteht, Bilder zu vergleichen, wird der erläuternde Text außerhalb des Rahmens platziert.

Bevor Sie das Hintergrundbild unproportional strecken, entscheiden Sie, ob es sich um ein Bild handelt, das als Ganzes gesehen werden muss, oder um eine Dekoration, die ausgeschnitten werden kann. Bilder, die vollständig sichtbar sein müssen, wie Produktfotos oder erklärende Diagramme, und dekorative Hintergründe sollten nicht nach demselben Standard behandelt werden.