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 Array-Verarbeitung in React und Redux

CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung

Erläuterung der Array-Verarbeitung in React und Redux

Einige Tipps zum Website-Design

Beispielcode zur Implementierung einer Kreisbahnanimation mit CSS3 und Tabellen-Tags

Anwendung von Hadoop-Zählern und Datenbereinigung

JavaScript-Canvas zum Erstellen eines Rubbellos-Beispiels

Detaillierte Erklärung zur Verwendung der Vue-Verifizierungscode-Komponente

MySQL-Datenoperation – Verwendung von DML-Anweisungen

Lösung zum Finden aller untergeordneten Zeilen für eine bestimmte übergeordnete Zeile in MySQL

CSS-Position feste linke und rechte Doppelpositionierungs-Implementierungscode

Analyse der grundlegenden Verwendung von ul und li

Artikel empfehlen

Natives JS zum Erzielen eines coolen Paging-Effekts

Zehn wichtige Fragen zum Erlernen der Grundlagen von Javascript

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

So finden und löschen Sie doppelte Datensätze in MySQL

Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)

Beispiele für die Verwendung des ES6-Spread-Operators

Detaillierte Erläuterung der MERGE-Speicher-Engine von MySQL

So verwenden Sie vue.js zum Implementieren der Drag & Drop-Funktion

Der Unterschied zwischen HTML-Name-ID und Klasse_PowerNode Java Academy

Zusammenfassung verschiedener Methoden für JavaScript um festzustellen ob es sich um ein Array handelt

JS realisiert den Effekt des Bildwasserfallflusses

So konfigurieren Sie die PDFLatex-Umgebung in Docker

Mehrere Möglichkeiten zur vertikalen und horizontalen Zentrierung in CSS3 mit unbestimmter Höhe und Breite

So fügen Sie Docker ein Zertifikat hinzu

So löschen Sie den Timer elegant in Vue