So verwenden Sie ein Margin-Float-Hintergrundbild

Dieses Mal zeige ich Ihnen, wie Sie Margin-Float-Hintergrundbilder verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Margin-Float-Hintergrundbildern gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Lassen Sie uns heute die Probleme lösen, die beim Erstellen von Webseiten auftreten

1 Fügen Sie ein Hintergrundbild ein und platzieren Sie das Bild am unteren Rand von p, um das zu füllen ganze Reihe.

<style>
    background:url(xxx.jpg) no-repeat;
    background-position:bottom; 
    background-size:100%;</style>

Attribute:

Hintergrundposition: Das Hintergrundpositionsattribut wird verwendet, um die Position des Hintergrundbilds festzulegen Dieses Attribut kann nur auf Elemente auf Blockebene und ersetzte Elemente angewendet werden. Zu den Ersetzungselementen gehören img, input, textarea und select.

Es gibt zwei Arten von Syntaxwerten: Länge und Schlüsselwort.

Länge: Legen Sie den horizontalen Wert (x-Achse) und den vertikalen Wert (y-Achse) fest, z. B.: Hintergrundposition: 10px 20px; Schlüsselwörter: oben links (oben links), oben in der Mitte (oben in der Mitte) usw. Wenn der zweite Wert nicht festgelegt ist, wird standardmäßig die Mitte verwendet.

Hintergrundgröße: Definieren Sie die Größe des Hintergrundbilds.

Attributwert 1.Länge: Der erste Wert ist die Breite, der zweite Wert ist die Höhe. Wenn nur der erste Wert festgelegt ist, wird der zweite Wert automatisch in „ auto“

2.Prozentsatz: Legen Sie die Breite und Höhe des Bildes als Prozentsatz des übergeordneten Elements fest. Der erste Wert ist die Breite und der zweite Wert ist die Höhe. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt.

3.cover: Das Hintergrundbild wird erweitert, um den Bereich vollständig abzudecken (ungleiches Verhältnis)

4.contain:

Hintergrundbilderweiterung deckt den Bereich vollständig ab (gleiches Verhältnis)

2.Randproblem

　 (1) Rand: automatisch automatisch; Warum kann es nicht vertikal zentriert werden

Unterstützt kein oberes und unteres Auto, da es schwierig ist, die Höhe auf der Seite zu bestimmen

(2) Der Unterschied zwischen Rand und Polsterung

　Rand: Wenn Sie Platz außerhalb des Randes hinzufügen müssen. Wenn sie sich gegenseitig aufheben müssen. Beispielsweise ergibt ein Rand von 15 Pixel + 20 Pixel einen Rand von 20 Pixel.

Auffüllung: Sie müssen Platz innerhalb des Randes hinzufügen. Der Bedarf entspricht der Summe beider. Beispielsweise führt eine Auffüllung von 15 Pixel + 20 Pixel zu einem Leerraum von 35 Pixel.

(3) Es hat keine Auswirkungen auf die oberen und unteren Ränder von Inline-Elementen .

3.Float-Problem

(1) Wenn das hintere p nach links zum oberen p wandert, wird der Text im oberen p um das driftende p umbrochen

Relevant für den Dokumentenfluss, siehe 4

4. Dokumentenfluss

Dies geschieht während des Elementsatz- und Layoutprozesses , werden die Elemente automatisch von links nach rechts und von oben nach unten angeordnet.

Aus dem Dokumentenfluss auszubrechen bedeutet, Elemente aus dem gewöhnlichen Layout und Satz zu entfernen und Blockelemente zu positionieren Die Zeit ist, als ob das treibende Element nicht existierte. Absolute und gleitende Floats bei der Positionierung unterbrechen den Dokumentenfluss.

Teilweise ignoriert: Float ist außerhalb des Dokumentenflusses, andere Boxen ignorieren dieses Element, aber das Inhalt innerhalb der Box Das Verbindungselement verlässt die Driftposition und existiert um sie herum.

Vollständig ignorieren: Absolut ist außerhalb des Dokumentflusses. Andere Boxen, einschließlich Inline-Elemente innerhalb der Box, ignorieren das positionierte Element vollständig.

Margin und Float können nicht gleichzeitig verwendet werden

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Gulp-Befehl zum Generieren von Sprites

Der Text der Dropdown-Liste „Safari Browser Select“ ist zu lang und umschließt nicht Lösung
Detaillierte Erläuterung der BEM-Syntax

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein Margin-Float-Hintergrundbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!