Heim > Artikel > Web-Frontend > CSS implementiert ein reaktionsfähiges Hintergrundbild im Vollbildmodus

CSS implementiert ein reaktionsfähiges Hintergrundbild im Vollbildmodus

巴扎黑Original: 2017-05-27 17:24:362564Durchsuche

Eines der beliebtesten Webseitenformate sind derzeit große Vollbildbilder. In diesem Artikel wird der einfachste Weg verwendet, um diesen Effekt zu erzielen. Es wird die CSS-Eigenschaft „background-size“ verwendet ,kein Javascript erforderlich.

Kernkonzepte

Verwenden Sie das Attribut „Hintergrundgröße“, um das gesamte Ansichtsfenster auszufüllen

Wenn der Wert des CSS-Attributs „Hintergrundgröße“ auf „Cover“ gesetzt ist, skaliert der Browser automatisch die Breite und Höhe des Hintergrundbilds proportional, bis es größer oder gleich der Breite und Höhe des ist Ansichtsfenster

Verwenden Sie Medienabfragen, um kleinere Hintergrundbilder für mobile Geräte bereitzustellen

Warum einen kleinen Hintergrund bereitstellen? Bilder für mobile Geräte? In der Demo beträgt die tatsächliche Größe des Hintergrundbilds, das wir sehen, 5498 Pixel * 3615px, der Zweck der Verwendung eines so großen Bildes besteht darin, die meisten Breitbildmonitore ohne verschwommene Anzeige zu erfüllen, auf Kosten einer Bildgröße von 1,7 MB.

Es besteht jedoch keine Notwendigkeit, so große Bilder auf Mobilgeräten zu verwenden. Gleichzeitig führen große Bilder zu einem langsameren Laden, insbesondere in Mobilfunknetzen.

Es ist zu beachten, dass die Bereitstellung eines kleinen Hintergrundbilds für mobile Geräte für diese technische Lösung optional ist.

Üben

HTML

<!doctype html>
<html>
<body>
    ...Your content goes here...
</body>
</html>

Später werden wir ein Hintergrundbild für das Body-Tag angeben, damit das Hintergrundbild den gesamten Browser-Ansichtsbereich ausfüllen kann.

Tatsächlich kann diese Lösung für alle Container auf Blockebene effektiv sein. Wenn die Breite und Höhe Ihres Containers auf Blockebene dynamisch sind, wird das Hintergrundbild automatisch erweitert und verkleinert, um den gesamten Container auszufüllen.

Der Stil des CSS-Body-Tags ist wie folgt:

body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);

/* 背景图垂直、水平均居中 */
background-position: center center;

/* 背景图不平铺 */
background-repeat: no-repeat;

/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;

/* 让背景图基于容器大小伸缩 */
background-size: cover;

/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #**46;
}

Das wichtigste oben ist :

background-size: cover;

Auf diese Weise skaliert der Browser das Hintergrundbild proportional, bis die Breite und Höhe des Hintergrundbilds nicht kleiner sind als die Breite und Höhe des Containers (im obigen Beispiel). , das Body-Tag).

Hierbei ist Folgendes zu beachten: Wenn das Hintergrundbild kleiner als die Größe des Body-Tags ist (z. B. auf einem hochauflösenden Display oder wenn der Seiteninhalt besonders groß ist), Der Browser streckt das Bild. Wir alle wissen, dass ein Bild unscharf wird, wenn es gestreckt wird.

Achten Sie daher bei der Auswahl eines Hintergrundbildes besonders auf die Größe. Um der großen Bildschirmgröße gerecht zu werden, beträgt die in der Demo verwendete Bildgröße 5498px * 3615px.

Damit das Hintergrundbild immer relativ zum Ansichtsfenster zentriert bleibt, erklären wir gleichzeitig:

background-position: center center;

Die oben genannten Regeln positionieren den Ursprung der Hintergrundbildskalierung auf in der Mitte des Ansichtsfensters.

Das nächste Problem, das wir lösen müssen, ist: Wenn die Höhe des Inhalts größer als die Höhe des Ansichtsfensters ist, wird eine Bildlaufleiste angezeigt. Wir möchten, dass das Hintergrundbild im Verhältnis zum Ansichtsfenster fest bleibt, auch wenn der Benutzer scrollt.

Die Lösung lautet:

background-attachment: fixed;

(Optional) Verwenden Sie Medienabfragen, um mit kleinen Bildschirmen umzugehen

Um mit dem kleinen Bildschirm klarzukommen, habe ich das Hintergrundbild mit Photoshop auf 768px * 505px skaliert und dann smush.it verwendet Bildgröße komprimieren. Dadurch wird die Bildgröße von 1741 KB auf 114 KB reduziert, was einer Einsparung von 93 % entspricht.

So wird die Medienabfrage geschrieben:

@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

Die obige Medienabfrage hat die maximale Breite: 767 Pixel Als Haltepunkt festlegen, was bedeutet, dass ein großes Hintergrundbild verwendet wird, wenn das Browser-Ansichtsfenster größer als 767 Pixel ist, andernfalls ein kleines Hintergrundbild.

Der Nachteil bei der Verwendung der oben genannten Medienabfrage besteht darin, dass Sie beim Laden des kleinen oder großen Hintergrundbilds ein kurzes Flackern sehen, wenn Sie das Browserfenster von 1200 Pixel auf 640 Pixel (oder umgekehrt) verkleinern.

Das obige ist der detaillierte Inhalt vonCSS implementiert ein reaktionsfähiges Hintergrundbild im Vollbildmodus. 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：Einführung in die relative und absolute Positionierung in CSSNächster Artikel：Einführung in die relative und absolute Positionierung in CSS

In Verbindung stehende Artikel

Mehr sehen