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

Zusammenfassung der Dockerfile-Maven-Plugin-Nutzungsanleitung

Inhaltsverzeichnis POM-Konfiguration Setting.xml-...

Django2.* + Mysql5.7-Entwicklungsumgebung Integrations-Tutorial-Diagramm

Umfeld: MAC_OS 10.12 Python 3.6 MySQL 5.7.25 Djan...

MySql-Lerntag 03: Verbindungs- und Abfragedetails zwischen Datentabellen

Primärschlüssel: Schlagwort: Primärschlüssel Funk...

Linux verwendet die suid vim.basic-Datei, um eine Rechteausweitung zu erreichen

Auf Kali reproduzieren Legen Sie zunächst die Sui...

Detailliertes Tutorial zum Ausführen von Selenium+Chromedriver auf dem Server

1. Einleitung Ich möchte Selenium verwenden, um D...

Vue implementiert den Anruf der PC-Kamera, um Fotos in Echtzeit aufzunehmen

Vue ruft die PC-Kamera auf, um Bilder in Echtzeit...

Verzeichnisberechtigungen beim Erstellen eines Containers mit Docker

Als ich gestern ein Projekt schrieb, musste ich d...

Anweisungen zur Verwendung der MySQL-Isolations-Leseansicht

Welche historische Version kann die aktuelle Tran...

MySQL-Optimierung: So schreiben Sie hochwertige SQL-Anweisungen

Vorwort Im Internet gibt es zahlreiche Informatio...

Top 10 der nützlichsten und wichtigsten Open-Source-Tools im Jahr 2019

In der Open-Source-Umfrage von Black Duck aus dem...

CSS3-Textanimationseffekte

Wirkung html <div Klasse="sp-container&qu...

Docker erstellt MySQL-Erklärung

1. MySQL-Image herunterladen Befehl: docker pull ...

Detaillierte Erläuterung der MySQL-Fremdschlüsseleinschränkungen

Amtliche Dokumentation: https://dev.mysql.com/doc...

Unglaubliche CSS-Navigationsleiste unterstreiche folgenden Effekt

Der erste Cutter in China github.com/chokcoco Hie...