Heim > Artikel > Web-Frontend > 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

WBOYOriginal: 2023-09-13 10:57:141042Durchsuche

使用 CSS Viewport 单位 vh 和 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 dc6dce4a544fdca2df29d5ac0ea9906b mit dem Klassennamen <code>fullscreen-bg erstellt -Element, das das gesamte Ansichtsfenster ausfüllt. Wir haben ein a1f02c36ba31691bcfe87b2722de723b-Element eingefügt, um das Hintergrundbild anzuzeigen. Anschließend verwenden wir CSS, um diese Elemente zu formatieren. fullscreen-bg 的 dc6dce4a544fdca2df29d5ac0ea9906b 元素，它将填充整个视口。我们在其中插入了一个 a1f02c36ba31691bcfe87b2722de723b 元素，用于显示背景图像。然后，我们使用 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 来填满整个 a1f02c36ba31691bcfe87b2722de723b 元素的容器，确保图像在任何设备上都能等比例缩放，并完整显示在视口中。

最后，我们将示例图像的路径设置为 background-image.jpg

Zuerst setzen wir die Eigenschaft 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 &lt 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!

JavaScript jquery css html Object position overflow viewport background

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-Viewport: So erstellen Sie eine adaptive Textgröße mit vw und vminNächster Artikel：CSS-Viewport: So erstellen Sie eine adaptive Textgröße mit vw und vmin

In Verbindung stehende Artikel

Mehr sehen