CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung

Beim Erstellen einer Homepage, beispielsweise einer Anmeldeseite, müssen Sie häufig ein großes Hintergrundbild einfügen und das Bild muss proportional skaliert werden, um es an die Größe verschiedener Bildschirme anzupassen.

Der HTML-Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <link rel="stylesheet" href="../css/login.css"><!-- Mein CSS-Codepfad-->

    <Titel>. . . </Titel>
</Kopf>

<Text>
    <div Klasse="bgimg">
</body>

</html>

Der CSS-Code lautet wie folgt:

.bgimg{
    Position: fest;
    oben: 0;
    links: 0;
    Breite: 100 %;
    Höhe: 100 %;
    Mindestbreite: 1000px;
    z-Index: -10;
    Zoom: 1;
    Hintergrundfarbe: #fff;
    Hintergrund: URL (../img/bg_login.jpg) keine Wiederholung;
    Hintergrundgröße: Abdeckung;
    -webkit-Hintergrundgröße: Abdeckung;
    -o-Hintergrundgröße: Abdeckung;
    Hintergrundposition: Mitte 0;
}

Analysieren Sie die Rolle des CSS-Codes:

Position: fest;
oben: 0;
links: 0;

Diese drei Sätze fixieren das gesamte Div oben und links auf dem Bildschirm

Breite: 100 %;
Höhe: 100 %;
Mindestbreite: 1000px;

Die ersten beiden Sätze oben bringen das gesamte Div in die gleiche Größe wie der Bildschirm und erzielen so einen Vollbildeffekt. Der Zweck der Mindestbreite besteht darin, sicherzustellen, dass die Größe des Div unverändert bleibt, wenn die Bildschirmbreite innerhalb von 1000 Pixeln liegt, d. h. das Bild nicht skaliert wird.

z-Index: -10;

Der Zweck besteht darin, das gesamte Div unter jeder Ebene auf der HTML-Seite zu platzieren. Unter normalen Umständen ist der Z-Index-Wert der standardmäßig erstellten Ebene 0. Wenn wir also hier -1 schreiben, kann dies auch erreicht werden. Wenn wir hier jedoch -10 schreiben, stellen wir sicher, dass das gesamte Div ganz unten ist. Denn wenn die Seite zu viele Ebenen hat, bedeutet die Verwendung von -1 manchmal nicht unbedingt, dass es ganz unten ist. Wenn Sie jedoch eine große Zahl wie -100 schreiben, ergibt dies keinen Sinn. Verwenden Sie -10, damit es wie ein Hintergrundbild aussieht. Tatsächlich ist es ein ganz normales Div, aber die hierarchische Beziehung hat sich geändert, wodurch es wie ein Hintergrundbild aussieht.

Zoom: 1;

Zoom ist der Teil des CSS-Hacks, der speziell für IE6 funktioniert. Der IE6-Browser führt zoom:1 aus, um das Zoomverhältnis des Objekts anzuzeigen. Kompatibel mit den Browsern IE6, IE7 und IE8. Häufig treten einige Probleme auf, die Sie mit zoom:1 lösen können. Zoom hat die folgenden Funktionen: 1. Löst im IE-Browser ein Haslayout aus. 2. Löst einige Probleme wie Schweben und Randüberlappung unter IE.

Hintergrundwiederholung: keine Wiederholung;

Die Bilder sind gekachelt und nicht wiederholt

Hintergrundgröße: Abdeckung;
-webkit-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße: Abdeckung;

Die obigen drei Sätze bedeuten dasselbe, nämlich, dass das Bild synchron mit der Bildschirmgröße skaliert wird, einige Teile jedoch möglicherweise abgeschnitten werden, aber nicht angezeigt werden. Die folgenden zwei Sätze dienen der Kompatibilität mit den Browsern Chrome und Opera.

Hintergrundposition: Mitte 0;

Der obige Satz bedeutet die Position des Bildes, zentriert und linksbündig

Die Wirkung ist wie folgt:

Wenn es größer als 1000px ist: (der Screenshot ist zu groß, ich habe das Bild etwas verkleinert)

Wenn weniger als 1000 Pixel:

Originalbild: (Dieses ist zu groß, deshalb habe ich es etwas verkleinert)

Dies ist das Ende dieses Artikels über die Implementierung der Bildschirmanpassung von Hintergrundbildern mit CSS. Weitere relevante Inhalte zur Bildschirmanpassung von CSS-Hintergrundbildern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Interpretation und Analyse von HTTP-Header-Informationen (detaillierte Zusammenfassung)

>>: Eine kurze Erläuterung zu „Group By“ in MySQL

Erläuterung der Regeln zum Standortabgleich für die Nginx-Konfiguration (Beispiel)

CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung

Erläuterung der Regeln zum Standortabgleich für die Nginx-Konfiguration (Beispiel)

So erstellen Sie LVM für das XFS-Dateisystem in Ubuntu

Detaillierte Erklärung zum Anzeigen und Festlegen von Dateiberechtigungen auf dem Mac

Dropdown-Menü implementiert durch HTML+CSS3+JS

Praxis der Linux-Datei- und Benutzerverwaltung

Lernen Sie die gängigen Methoden und Techniken in JS-Arrays und werden Sie ein Meister

Lösung für das Problem, dass das Vue-Seitenbild nicht angezeigt wird

Detaillierte Erläuterung der Routing-Konfiguration im Linux-System mit mehreren Netzwerkkarten

Lernen Sie, wie Sie in 6 Sekunden 1 Million Datensätze in MySQL einfügen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.21 winx64 unter Windows 10

Artikel empfehlen

So lösen Sie das Problem, dass der Docker-Container keinen Vim-Befehl hat

Implementierungsschritte für die Docker-Bereitstellung von SpringBoot-Anwendungen

CSS-Implementierungscode für mehrstufige Menüs

Methode zur Änderung des MySQL-Kontokennworts (Zusammenfassung)

Webdesign-Tutorial (6): Behalte deine Leidenschaft für Design

CUDA8.0 und CUDA9.0 koexistieren unter Ubuntu16.04

Detaillierte Erklärung der MySQL Truncate-Verwendung

So erstellen Sie einen K8S-Cluster und installieren Docker unter Hyper-V

js-Version zur Realisierung der Rechnerfunktion

MySql-Anmeldekennwort vergessen und Lösung für vergessenes Kennwort

Einführung mehrerer benutzerdefinierter Schriftarten in CSS3

Natives JS-objektorientiertes Tippspiel

Grafisches Tutorial zur Installation und Aktivierung von VMware Workstation 14 Pro

Analyse und Behandlung von Bildlaufleisten in HTML und eingebettetem Flash