Web-Frontend
CSS-Tutorial
So erstellen Sie ein Vollbild-Hintergrundbild mit den CSS-Viewport-Einheiten vh und vw
So erstellen Sie ein Vollbild-Hintergrundbild mit den CSS-Viewport-Einheiten vh und vw
So erstellen Sie ein Vollbild-Hintergrundbild mit den CSS-Viewport-Einheiten vh und vw. Es sind spezifische Codebeispiele erforderlich.
Mit der Beliebtheit mobiler Geräte und responsivem Design sind Vollbild-Hintergrundbilder zu einem häufigen Element im Design geworden . Die traditionelle Methode ist die Verwendung von JavaScript oder jQuery, um dies zu erreichen. Jetzt können Sie jedoch problemlos ein Hintergrundbild im Vollbildmodus implementieren, indem Sie die CSS-Viewport-Einheiten vh und vw nutzen. Ansichtsfenstereinheiten sind relativ zur Größe des Ansichtsfensters (d. h. des Browserfensters), vh stellt einen Prozentsatz der Ansichtsfensterhöhe dar und vw stellt einen Prozentsatz der Ansichtsfensterbreite dar.
Im folgenden Beispiel zeigen wir, wie man CSS-Viewport-Einheiten verwendet, um ein Hintergrundbild im Vollbildmodus zu erstellen. Zuerst erstellen wir eine HTML-Datei und fügen darin den folgenden Code ein:
<!DOCTYPE html>
<html>
<head>
<style>
.fullscreen-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: -1;
}
.fullscreen-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="fullscreen-bg">
<img src="background-image.jpg" alt="Background Image">
</div>
</body>
</html>Im obigen Beispiel haben wir einen <div> mit dem Klassennamen <code>fullscreen-bg erstellt -Element, das das gesamte Ansichtsfenster ausfüllt. Wir haben ein <img>-Element eingefügt, um das Hintergrundbild anzuzeigen. Anschließend verwenden wir CSS, um diese Elemente zu formatieren. fullscreen-bg 的 <div> 元素，它将填充整个视口。我们在其中插入了一个 <img> 元素，用于显示背景图像。然后，我们使用 CSS 来设置这些元素的样式。
首先，我们将 .fullscreen-bg 的 position 属性设置为 fixed，这样它就可以始终保持在浏览器视口的顶部和左侧。然后，我们通过 top: 0 和 left: 0 将其定位在网页的左上角。接下来，我们使用 width: 100vw 和 height: 100vh 将其宽度和高度设置为视口的百分比，这样它就可以填满整个视口。然后，我们使用 overflow: hidden 将其溢出内容隐藏起来，并使用 z-index: -1 将其放置在其他内容的下方。
接下来，我们设置了.fullscreen-bg img 的宽度和高度为 100%，并使用 object-fit: cover 来填满整个 <img> 元素的容器，确保图像在任何设备上都能等比例缩放，并完整显示在视口中。
最后，我们将示例图像的路径设置为 background-image.jpg
position von .fullscreen-bg auf fixed, damit sie immer oben und links im Browser-Ansichtsfenster bleiben kann . Dann positionieren wir es mit top: 0 und left: 0 in der oberen linken Ecke der Seite. Als nächstes legen wir seine Breite und Höhe mit width: 100vw und height: 100vh auf einen Prozentsatz des Ansichtsfensters fest, sodass es das gesamte Ansichtsfenster ausfüllt. Anschließend verbergen wir seinen Überlaufinhalt mit overflow: versteckt und platzieren ihn unter anderen Inhalten mit z-index: -1. Als nächstes setzen wir die Breite und Höhe von .fullscreen-bg img auf 100 % und verwenden object-fit: cover, um den gesamten < A auszufüllen Container für ;img>-Elemente, um sicherzustellen, dass das Bild auf jedem Gerät proportional skaliert und vollständig im Ansichtsfenster angezeigt wird. 🎜🎜Abschließend legen wir den Pfad des Beispielbilds auf background-image.jpg fest, den Sie durch den Pfad des gewünschten Hintergrundbilds ersetzen können. 🎜🎜Mit dem obigen Beispielcode können Sie ganz einfach die CSS-Viewport-Einheiten vh und vw verwenden, um ein Hintergrundbild im Vollbildmodus zu erstellen. Denken Sie daran, den Bildpfad durch Ihr eigenes Hintergrundbild zu ersetzen, um es an Ihre Designanforderungen anzupassen. Ich hoffe, dieser Artikel hilft Ihnen! 🎜Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Vollbild-Hintergrundbild mit den CSS-Viewport-Einheiten vh und vw. 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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
