Heim > Artikel > Web-Frontend > Detaillierte Erläuterung von CSS zur Realisierung eines adaptiven Vollbild-Hintergrundbilds für Webseiten

Detaillierte Erläuterung von CSS zur Realisierung eines adaptiven Vollbild-Hintergrundbilds für Webseiten

小云云Original: 2018-02-07 09:12:308307Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von CSS zum Realisieren adaptiver Vollbild-Hintergrundbilder auf Webseiten vor. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und es als geben eine Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Webseitenhintergrund adaptiver Vollbildmodus.PNG

Ein klares und schönes Hintergrundbild kann einer Webseite viele Punkte hinzufügen, und Designer fügen oft hinzu es zur Seite Verwenden Sie ein großes Bild für den Hintergrund. Wir möchten nicht, dass das Bild aufgrund unterschiedlicher Auflösungen verformt wird, und wir möchten auch nicht, dass der Hintergrund freigelegt wird, wenn der Bildschirm groß ist Bild, das sich an die Bildschirmgröße anpassen kann, ohne sich zu verformen. Das Hintergrundbild ist groß und das Hintergrundbild scrollt nicht, wenn die Bildlaufleiste scrollt.

So geht's mit CSS:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body>
<p class="wrapper">
    <!--背景图片-->
    <p id="web_bg" style="background-image: url(./img/bg.jpg);"></p>
    <!--其他代码 ... -->
</p>
</body>
</html>

CSS:

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

Als nächstes analysieren wir die Funktion jeder Codezeile in CSS:

  position:fixed;
  top: 0;
  left: 0;

Diese drei Zeilen lassen Das gesamte p ist Oben und links auf dem Bildschirm fixiert

width:100%;
height:100%;
min-width: 1000px;

Die ersten beiden Sätze oben dienen dazu, das gesamte p auf die gleiche Größe wie der Bildschirm zu bringen und so die Vollständigkeit zu erreichen. Der Zweck von min-width besteht darin, die Größe von p unverändert zu lassen, wenn die Bildschirmbreite innerhalb von 1000 Pixeln liegt. Das heißt, in diesem Fall sollte das Bild beim Skalieren der Bildschirmbreite nicht skaliert werden (es ist nur so). gültig innerhalb von 1000px).

z-index:-10;

Der Zweck besteht darin, das gesamte p unter jeder Ebene in der HTML-Seite zu erstellen. Unter normalen Umständen der Z-Indexwert der ersten erstellten Ebene ist 0, also kann es auch erreicht werden, wenn wir hier -1 schreiben, aber wenn wir hier -10 schreiben, soll sichergestellt werden, dass sich das gesamte p unten befindet, denn wenn die Seite zu viele Ebenen enthält, kann es manchmal sein, dass -1 verwendet wird nicht unbedingt ganz unten stehen, aber wenn es so geschrieben ist, ist eine große Zahl wie -100 bedeutungslos. Verwenden Sie index:-10, um das zu erreichen, was wie ein Hintergrundbild aussieht. Dies ist eigentlich das häufigste p, aber die hierarchische Beziehung hat sich geändert, sodass es wie ein Hintergrundbild aussieht.

background-repeat: no-repeat;

Das Obige ist der Hintergrund, wiederholen Sie es nicht

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

Die oben genannten drei Sätze haben die gleiche Bedeutung, das heißt, dass das Bild synchron mit der Bildschirmgröße skaliert werden soll, einige Teile jedoch möglicherweise abgeschnitten sind, aber nicht weiß sind. Die folgenden beiden Sätze dienen der Kompatibilität mit Chrome- und Opera-Browsern.

background-position: center 0;

Der obige Satz bezeichnet die Position des Bildes, zentriert und nach links ausgerichtet.

Verwandte Empfehlungen:

CSS3-Tutorial (5): Webseitenhintergrundbild_css3_CSS_Webseitenproduktion

JS-Implementierung zum Erstellen von Webseitenhintergrundbildern Methode zum diagonalen Bewegen_Javascript-Fähigkeiten

Vollbildeinstellung des Web-Hintergrundbildes_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von CSS zur Realisierung eines adaptiven Vollbild-Hintergrundbilds für Webseiten. 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：Detaillierte Erläuterung der neuen Verwendung von CSS-SelektorenNächster Artikel：Detaillierte Erläuterung der neuen Verwendung von CSS-Selektoren

In Verbindung stehende Artikel

Mehr sehen