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

40 Webseiten-Designs mit supergroßen Schriftarten

Heutige Webdesigns neigen dazu, sehr große Schrif...

Beispiel für eine Methode zur Überprüfung des Status einer Linux-Firewall

So überprüfen Sie den Status der Linux-Firewall 1...

Detaillierte Fehlerbehebung bei Docker.service-Startfehlern

Führen Sie den folgenden Befehl aus, um einen Feh...

Was ist ein MIME-TYP? MIME-Typen-Typensammlung

Was ist ein MIME-TYP? 1. Zunächst müssen wir verst...

Schritte zur Installation von cuda10.1 unter Ubuntu 20.04 (grafisches Tutorial)

Vorbereitung vor der Installation Der Hauptzweck ...

So legen Sie die Speichergröße von Docker Tomcat fest

Wenn Sie Tomcat in Docker installieren, kann es b...

Öffnen Sie den Windows-Server-Port (nehmen Sie als Beispiel Port 8080)

Was ist ein Port? Bei den Ports, auf die wir uns ...

Detaillierte Erklärung, wie Vue-Komponenten Werte untereinander übertragen

Inhaltsverzeichnis Überblick 1. Die übergeordnete...

Vue-Element el-transfer fügt Drag-Funktion hinzu

Das Core Asset Management Project erfordert, dass...

JavaScript implementiert Informationen zur Kennwortfeldüberprüfung

In diesem Artikelbeispiel wird der spezifische Ja...

Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Inhaltsverzeichnis Problembeschreibung 1. Basislö...

SQL IDENTITY_INSERT-Fallstudie

Wenn eine Spalte in einer Datentabelle einmal als...