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
Artikel empfehlen
Grafische Erklärung des MySQL-Abfragecaches
Inhaltsverzeichnis 1. Prinzipübersicht Query Cach...
Ein Designer beschwert sich erneut über die offizielle Website von Hammer
Letztes Jahr war der offene Brief ein großer Erfo...
Einführung in die MIME-Kodierung (integriert aus Online-Informationen und praktischen Erfahrungen)
1. MIME: Mehrzweck-Internet-Mail-Erweiterungen Da...
Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios
Inhaltsverzeichnis Vorwort Kern - CancelToken Pra...
Verwendung von relativen und absoluten Pfaden unter Linux
01. Übersicht Absolute und relative Pfade kommen ...
Detaillierte Erläuterung verschiedener Kommunikationswege zwischen Linux-Benutzerstatus und Kernelstatus
Aufgrund der Einschränkung der CPU-Berechtigungen...
So aktualisieren, verpacken und laden Sie Docker-Container in die Alibaba Cloud hoch
Dieses Mal werden wir versuchen, den laufenden Co...
Verschiedene Probleme und Lösungen beim Bereitstellen von Tomcat zur Veröffentlichung von Projekten unter Linux
Bereitstellen des Projekts in der Testumgebung de...
Detaillierte Einführung in die Bereitstellung eines K8S-Clusters auf einem CentOS7-System
Inhaltsverzeichnis 1 Ausführung und Planung 1.1 V...
Detaillierte Erklärung der Lösung für die Baidu-https-Authentifizierungsaufforderung „Bitte leiten Sie Ihre http-Site 301 auf die https-Site um“
Ich wollte vor Kurzem eine Website auf https-Zugr...
Lösung für den ineffektiven Rand von in HTML verschachtelten Divs
Hier ist eine Lösung für das Problem, dass der Ra...
CSS zum Erzielen eines schnellen und coolen Schüttelanimationseffekts
1. Einführung in Animate.css Animate.css ist eine...
Detaillierte Schritte für QT zum Herstellen einer Verbindung zur MySQL-Datenbank
Der erste Schritt besteht darin, das entsprechend...
JavaScript-Implementierung des Spiels des Lebens
Inhaltsverzeichnis Konzept-Einführung Logische Re...
Beispielcode zur Implementierung der Anmeldung mit Bestätigungscode in der SMS-API in Node
1. Node-Server einrichten + Datenbankverbindung D...