Heim > Artikel > Web-Frontend > CSS legt die Hintergrundgröße fest

CSS legt die Hintergrundgröße fest

王林Original: 2023-05-21 12:10:077155Durchsuche

CSS ist eine Sprache für Webdesign und -layout, die eine Vielzahl von Stilen und Effekten ermöglicht, einschließlich Einstellungen für die Hintergrundgröße. Die Hintergrundgröße bezieht sich auf die Größe und den Anzeigemodus des Hintergrundbilds beim Laden der Webseite. Durch die richtige Einstellung der Hintergrundgröße kann nicht nur die Ästhetik der Webseite verbessert, sondern auch das Benutzererlebnis verbessert werden. Als nächstes erklären wir im Detail, wie man CSS zum Festlegen der Hintergrundgröße verwendet.

1. Verwenden Sie das Attribut „Hintergrundgröße“

Das Attribut „Hintergrundgröße“ wird verwendet, um die Hintergrundgröße festzulegen. Es kann die Größe und den Anzeigemodus des Hintergrundbilds festlegen. Es gibt drei häufig verwendete Werte: cover, include und px. Im Einzelnen stellen sie jeweils Folgendes dar:

cover: Stellen Sie sicher, dass das Hintergrundbild immer den gesamten Hintergrundbereich abdeckt. Wenn das Bild jedoch kleiner als der Hintergrundbereich ist, wird das Bild automatisch gestreckt oder vergrößert damit es den gesamten Hintergrundbereich abdeckt.
enthalten: Lassen Sie das Hintergrundbild möglichst zentriert im Hintergrundbereich erscheinen, ohne es zu dehnen, und behalten Sie dabei seine Originalgröße bei.
px: Geben Sie direkt die Größe des Hintergrundbilds an. Dies kann ein fester Wert, ein Prozentsatz oder das Schlüsselwort auto sein, wobei auto die Originalgröße darstellt.

Im Folgenden zeigen wir anhand einiger Beispiele, wie das Attribut „Hintergrundgröße“ verwendet wird.

cover

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: cover;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

Im obigen Code verwenden wir ein zufälliges Bild von Lorem Picsum als Hintergrund. In CSS verteilen wir das Hintergrundbild über den gesamten Hintergrundbereich und der Effekt ist wie folgt:

CSS legt die Hintergrundgröße fest

Sie können sehen, dass die Höhe des Bildes wird gestreckt, aber auch die Breite bleibt vollständig erhalten, wodurch der gesamte Hintergrund schöner aussieht.

contain

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: contain;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

Im obigen Code verwenden wir auch ein zufälliges Bild als Hintergrund. In CSS wird das Attribut „contain“ verwendet, damit das Bild nicht gestreckt, sondern möglichst zentriert im Hintergrundbereich angezeigt wird. Der Effekt ist wie folgt:

CSS legt die Hintergrundgröße fest

Wie Sie am Bildeffekt sehen können, kann das Bild zwar den Hintergrundbereich nicht vollständig abdecken, das gesamte Design ist jedoch größer ausgewogen.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: 600px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

Im obigen Code verwenden wir auch ein zufälliges Bild als Hintergrund. In CSS wird eine feste Werteinstellung mit einer Größe von 600 Pixel verwendet, und der Effekt ist wie folgt:

CSS legt die Hintergrundgröße fest

Wie Sie sehen können, da die Bildgröße beträgt Begrenzt auf 600 Pixel, der gesamte Hintergrund Es gibt viel Leerraum im Bereich. Wenn Sie daher den px-Wert zum Festlegen der Hintergrundgröße verwenden, müssen Sie ihn entsprechend der jeweiligen Situation anpassen, um sicherzustellen, dass die Größe des Hintergrundbilds mit der gesamten Seite koordiniert werden kann.

2. Verwenden Sie das Attribut „Hintergrundposition“

Zusätzlich zum Attribut „Hintergrundgröße“ können wir auch das Attribut „Hintergrundposition“ verwenden, um die Hintergrundposition festzulegen. Mit dieser Eigenschaft kann das Hintergrundbild mit dem entsprechenden Versatz horizontal oder vertikal innerhalb des Hintergrundbereichs zentriert werden. Die spezifische Verwendung ist wie folgt:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: cover;
  background-position: center;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

Im obigen Code legen wir die zentrierte Position fest und der Effekt ist wie folgt:

CSS legt die Hintergrundgröße fest

Aus dem Effekt Wie Sie auf dem Bild sehen können, stimmt die mittig ausgerichtete Position mit der Bildmitte überein und der visuelle Effekt ist sehr gut.

3. Zusammenfassung

Oben geht es darum, wie man CSS zum Festlegen der Hintergrundgröße verwendet. Bei der eigentlichen Entwicklung sollte der Schwerpunkt auf der Benutzererfahrung und der Gesamtästhetik der Seite liegen. Durch gute Hintergrundeinstellungen können wir unsere Webseiten attraktiver gestalten und bessere Designeffekte erzielen.

Das obige ist der detaillierte Inhalt vonCSS legt die Hintergrundgröße fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-EscapeNächster Artikel：CSS-Escape

In Verbindung stehende Artikel

Mehr sehen