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

So implementieren Sie das Singleton-Muster in Javascript

CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung

So implementieren Sie das Singleton-Muster in Javascript

Mehrere Möglichkeiten zur Implementierung bildadaptiver Container mit CSS (Zusammenfassung)

So stellen Sie mit einem Zertifikat eine Verbindung zu einem Remote-Docker-Server her

React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste

W3C Tutorial (14): W3C RDF und OWL Aktivitäten

Document Object Model (DOM) in JavaScript

Eine kurze Diskussion über die Anpassung mobiler Endgeräte

Eine einfache Möglichkeit, mit dem HTML-Tag „Marquee“ einen Scroll-Effekt zu erzielen (unbedingt lesen)

So aktivieren Sie die Swoole Loader-Erweiterung auf dem virtuellen Host des Linux-Systems

Implementierung eines schwebenden Werbestreifens in HTML und CSS

Artikel empfehlen

Detaillierte Erläuterung grundlegender Betriebsbefehle wie Starten und Stoppen von Nginx unter Windows

web.config (IIS) und .htaccess (Apache) Konfiguration

Vermeiden Sie den Missbrauch zum Lesen von Daten in Vue

So verwenden Sie Docker+DockerCompose zum Kapseln von Webanwendungen

So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox

Übersicht über die Unterschiede zwischen Linux TTY/PTS

So implementieren Sie die Formularvalidierung in Vue

Implementierung der MySQL-Tabellenlöschoperation (Unterschiede zwischen Löschen, Abschneiden und Löschen)

Eine bunte Katze unter Linux

Der Prozess der Installation von Docker auf Windows Server 2016 und die aufgetretenen Probleme

Detaillierte Erklärung zur Verwendung des Iframe-Tags (Attribute, Transparenz, adaptive Höhe)

So verwenden Sie Vue zum Entwickeln öffentlicher Account-Webseiten

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

Fünf Möglichkeiten zum automatischen Seitensprung in HTML

Ein Beispiel für die schnelle Bereitstellung von Webanwendungen mit Tomcat in Docker