CSS legt die Hintergrundgröße fest
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 id="Hello-World">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:
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 id="Hello-World">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:
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.
- px
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: 600px;
}
</style>
</head>
<body>
<h1 id="Hello-World">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:
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 id="Hello-World">Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>Im obigen Code legen wir die zentrierte Position fest und der Effekt ist wie folgt:
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen?
Mar 19, 2025 pm 03:58 PM
In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.
Erklären Sie das Konzept des faulen Ladens.
Mar 13, 2025 pm 07:47 PM
Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.
Wie funktioniert der React -Versöhnungsalgorithmus?
Mar 18, 2025 pm 01:58 PM
Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.
Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile?
Mar 18, 2025 pm 01:45 PM
In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens
Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben?
Mar 18, 2025 pm 01:44 PM
Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.
Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen?
Mar 19, 2025 pm 03:59 PM
Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.
Wie verbinden Sie React -Komponenten mit Connect () an den Redux -Store?
Mar 21, 2025 pm 06:23 PM
In Artikel werden die Verbindungskomponenten an Redux Store mit Connect () verbinden, wobei MapStatetoprops, MapDispatchtoprops und Leistungsauswirkungen erläutert werden.
Wie verhindern Sie das Standardverhalten bei Ereignishandlern?
Mar 19, 2025 pm 04:10 PM
In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.
