Zwei Methoden zum Strecken des Hintergrundbilds einer Webseite

Zwei Methoden zum Strecken des Hintergrundbilds einer Webseite
Es gibt zwei Lösungen:

Eine Möglichkeit ist CSS, bei dem background-size:cover verwendet wird, um den Streckungseffekt des Bildes zu erzielen. IE8 und niedrigere Versionen unterstützen background-size jedoch nicht, sodass Sie den Filtereffekt von Microsoft verwenden können. IE6 unterstützt dies jedoch nicht.

Code kopieren
Der Code lautet wie folgt:

body{background:url(bg.jpg) center center;Hintergrundgröße:Cover;Höhe:900px;Breite:100%;
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}

Eine andere Möglichkeit besteht darin, jQuery zu verwenden, dynamisch ein Div in den Text einzufügen und dann ein Bild in das Div einzufügen. Wenn sich die Größe des Browserfensters ändert, wird die Größe des Hintergrundbilds dynamisch festgelegt.
Code kopieren

Code kopieren
Der Code lautet wie folgt:

$(Funktion(){
$("body").anhängen("<div id='main_bg' style="position:absolute;"/>");
$("#main_bg").append("<img src='bg.jpg' id='bigpic'>");
Abdeckung();
$(window).resize(function(){ //Änderungen im Browserfenster
Abdeckung();
});
});
Funktion cover(){
var win_width = $(window).width();
var win_height = $(window).height();
$("#bigpic").attr({width:win_width,height:win_height});
}

<<:  Zusammenfassung häufig verwendeter CSS-Kapselungsmethoden

>>:  MySQL-Interviewfragen: So richten Sie Hash-Indizes ein

Artikel empfehlen

Webdesign-Tipps für Formular-Eingabefelder

1. Gestricheltes Feld, wenn die Abbrechen-Schaltfl...

Tutorial zur Installation von MySQL8 auf Centos7

Neue Funktionen in MySQL 8: Meine persönliche Mei...

Schritte zum Verpacken und Bereitstellen des Vue-Projekts auf dem Apache-Server

In der Entwicklungsumgebung wird das Vue-Projekt ...

Was ist Nginx-Lastausgleich und wie wird er konfiguriert?

Was ist Lastenausgleich? Der Lastausgleich wird h...

Zusammenfassung der 11 häufigsten Fehler von MySQL-Anfängern

Vorwort Sie erhalten möglicherweise häufig Warn-E...

Web-Unterrichtspläne, Unterrichtspläne für Anfänger

Unterrichtsthemen Webseite Anwendbare Klasse Zwei...

Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts

1. Docker installieren Öffnen Sie zunächst die Li...

Reiner CSS3-Code zur Implementierung einer laufenden Uhr

Wirkung der OperationCode-Implementierung html &l...

js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen

Heute werden wir einen einfachen Fall durchgehen ...

So importieren Sie SQL-Dateien in Navicat Premium

Ich habe heute mit der Arbeit an meinem Abschluss...

So stellen Sie DoNetCore mit Nginx in der Alibaba Cloud bereit

Grundlegende Umgebungskonfiguration Bitte kaufen ...