Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3
|
Bisher kannten wir mehrere Hintergrundattribute in CSS: Farbe, Bild, Wiederholung, Anhang, Position. Diese werden in CSS häufig verwendet. Welche neuen Attribute wurden also in CSS3 hinzugefügt? Schau nach unten: ** Neue CSS3-Eigenschaften: background-clip, background-origin, background-size 1.Hintergrund-Clip Die Clipping-Eigenschaft des Hintergrunds besteht darin, mit dem Zeichnen an der angegebenen Position zu beginnen. ** ** 2.Hintergrund-Ursprung Die Eigenschaft „background-origin“ gibt den Bereich an, in dem das Hintergrundbild positioniert wird. ** Die beiden obigen Eigenschaftswerte sind Border-Box, Padding-Box und Content-Box (es wird empfohlen, über ausreichende Kenntnisse des Box-Modells zu verfügen. Schauen Sie sich also einfach diese drei Eigenschaftswerte hier an, dann wird es klar) oder sehen Sie sich das folgende Bild an:
Background-Clip entspricht dem Starten des Clippings an einer dieser drei Positionen, um den entsprechenden Effekt zu erzielen. Siehe den Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
#div1 {
Rand: 20px gestrichelt blau;
Polsterung: 40px;
Hintergrund: rot;
}
#div2{
Rand: 20px gestrichelt blau;
Polsterung: 40px;
Hintergrund: rot;
Hintergrundclip: Polsterbox;
}
#div3{
Rand: 20px gestrichelt blau;
Polsterung: 40px;
Hintergrund: rot;
Hintergrundclip: Inhaltsbox;
}
</Stil>
</Kopf>
<Text>
<p>Kein Hintergrund-Clipping (Rahmen nicht definiert):</p>
<div id="div1">
<h2>Lorem Ipsum Dolor</h2>
<p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
<p>Hintergrundclip: Polsterbox:</p>
<div id="div2">
<h2>Lorem Ipsum Dolor</h2>
<p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
<p>Hintergrundclip: Inhaltsbox:</p>
<div id="div3">
<h2>Lorem Ipsum Dolor</h2>
<p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
</body>
</html>Effektbild:
Und background-origin ist der Bereich, in dem der Hintergrund angezeigt wird. Siehe den Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
div
{
Rand: 1px, durchgehend schwarz;
Polsterung: 35px;
background-image:url('1 (5).jpg');/*Wenn das Bild nicht angezeigt werden kann, müssen Sie es selbst ändern*/
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: links;
}
#div1 {
background-origin: border-box;/*Das Setzen einer padding-box hat den gleichen Effekt, Sie können es selbst ausprobieren*/
}
#div2 {
Hintergrundherkunft: Inhaltsbox;
}
</Stil>
</Kopf>
<Text>
<p>Relative Position des Begrenzungsrahmens des Hintergrundbilds</p>
<div id="div1">
<h2>Lorem Ipsum Dolor</h2>
<p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
<p>Das Hintergrundbild wird relativ zum Inhaltsfeld positioniert</p>
<div id="div2">
<h2>Lorem Ipsum Dolor</h2>
<p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
</body>
</html>Wirkung:
** 3.Hintergrundgröße Hintergrundgröße gibt die Größe des Hintergrundbildes an. Vor CSS3 wurde die Größe eines Hintergrundbildes durch die tatsächliche Größe des Bildes bestimmt. Mit der Eigenschaft „background-size“ in CSS3 können wir die Größe von Hintergrundbildern in verschiedenen Umgebungen ändern. Sie können die Größe in Pixeln oder Prozent angeben. Die von Ihnen angegebene Größe ist ein Prozentsatz im Verhältnis zur Breite und Höhe des übergeordneten Elements. Seine Attributwerte: ①.length legt die Höhe und Breite des Hintergrundbildes fest. Der erste Wert legt die Breite fest, der zweite die Höhe. Wenn nur ein Wert angegeben ist, wird der zweite auf „auto“ gesetzt. ②.lpercentage berechnet den Prozentsatz relativ zum Hintergrundpositionierungsbereich. Der erste Wert legt die Breite fest, der zweite die Höhe. Wenn nur ein Wert angegeben ist, wird der zweite auf „auto“ gesetzt ③.cover behält das Seitenverhältnis des Bildes bei und skaliert das Bild auf die Mindestgröße, die den Hintergrundpositionierungsbereich vollständig abdeckt. ④.contain behält das Seitenverhältnis des Bildes bei und skaliert das Bild auf die maximale Größe, die in den Hintergrundpositionierungsbereich passt. Zusammenfassen Oben sind die neuen Hintergrundeigenschaften von CSS3, die ich Ihnen vorgestellt habe. Ich hoffe, sie sind hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank! |
<<: Implementierung der MySQL-Datendesensibilisierung (Telefonnummer, ID-Karte)
>>: UCenter-Homepage fügt Statistikcode hinzu
Artikel empfehlen
Detaillierte Erläuterung der Vuex-Persistenz in der praktischen Anwendung von Vue
Inhaltsverzeichnis Vuex-Persistenz Zusammenfassen...
jQuery implementiert Formularvalidierungsfunktion
Beispiel für die Validierung eines jQuery-Formula...
Welche Vorteile bietet die Verwendung von B+Tree als Index in MySQL?
Inhaltsverzeichnis Warum benötigen Datenbanken In...
Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung
Vereinfacht ausgedrückt geht es beim Erstellen ein...
Mein CSS-Architekturkonzept – es ist von Person zu Person unterschiedlich, es gibt kein Bestes, nur das Passende
Vorwort <br />Ich arbeite schon eine ganze W...
Web-Kenntnisse: Lösung für die Koexistenz mehrerer IE-Versionen IETester
Meine Empfehlung Lösung für die Koexistenz mehrer...
Detaillierte Erklärung, wie Angular mit unerwarteten Ausnahmefehlern umgeht
Vorne geschrieben Unabhängig davon, wie gut der C...
Detaillierte Erläuterung der Konfigurationsmethode „Groß-/Kleinschreibung ignorieren“ für MySQL-Tabellennamen
Standardmäßig unterscheidet MySQL unter Linux zwi...
Detaillierte Analyse des Explain-Ausführungsplans in MySQL
Vorwort Das Schreiben effizienter SQL-Anweisungen...
Einführung in die Verwendung des Select-Optgroup-Tags in HTML
Gelegentlich muss ich ausgewählte Inhalte gruppier...
Spezifikationen für Hyperlink-Symbole: Verbessern Sie die Lesbarkeit von Artikeln
1. Was ist die Hyperlink-Symbol-Spezifikation ?&l...
So installieren Sie eine MySQL-Datenbank auf einem Debian 9-System
Vorwort Beim Anblick des Titels sollte sich jeder...
Lösung für das Problem „Fehler beim Konfigurieren von IDEA für die Verbindung zur MySQL-Datenbank“
Dieser Artikel stellt hauptsächlich die Lösung fü...
Ein Artikel zum Verständnis des Ausführungsprozesses von MySQL-Abfrageanweisungen
Vorwort Wir müssen bestimmte Daten abrufen, die d...
Lösung für das zu langsame Herunterladen des Docker-Images
Der Download des Docker-Images hängt oder ist zu ...