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

Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion

dieses Schlüsselwort Welches Objekt ruft die Funk...

Der neue TypeScript-Schnellstart-Übungsbericht des Partners Vue

Inhaltsverzeichnis 1. Bauen Sie mit dem offiziell...

Standards zum Schreiben von Codekommentaren bei der Webseitenerstellung

<br />Ich habe die in meiner Arbeit verwende...

Upgrade von MySQL 5.1 auf 5.5.36 in CentOS

Dieser Artikel beschreibt den Upgrade-Prozess von...

CSS-Navigationsleistenmenü mit kleinem Dreieck-Implementierungscode

Viele Webseiten haben kleine Dreiecke in ihren Na...

Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL

1. CSV-Datei importieren Verwenden Sie den folgen...

So verwenden Sie die Markdown-Editor-Komponente in Vue3

Inhaltsverzeichnis Installieren Komponenten impor...

Allgemeine Befehle für MySQL-Autorisierung, Start und Dienststart

1. Vier Startmethoden: 1.mysqld Starten Sie den M...

12 Arten der Komponentenkommunikation in Vue2

Inhaltsverzeichnis 1. Requisiten 2..synchronisier...

MySQL Multi-Instance-Bereitstellungs- und Installationshandbuch unter Linux

Was ist MySQL Multi-Instance Einfach ausgedrückt ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5.27 winx64

1. Installationspaket MySQL-Dienst-Downloadadress...

Lösung für die Inkonsistenz zwischen Crontab-Ausführungszeit und Systemzeit

Vorwort Unter LINUX werden periodische Aufgaben n...

JS realisiert den Effekt der Baidu News-Navigationsleiste

In diesem Artikel wird der spezifische JS-Code zu...