Informationen zur Verwendung des CSS-Hintergrunds

Im Folgenden finden Sie eine Zusammenfassung aller CSS-Hintergründe für Sie. Der Inhalt ist recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Alle Hintergrundeigenschaften können nicht vererbt werden.

1. Hintergrundfarbe

Alle Elemente können die Hintergrundfarbe festlegen.

Der Standardwert von „background-color“ ist „transparent“. Das heißt, wenn ein Element keine Hintergrundfarbe angibt, ist der Hintergrund transparent, sodass der Hintergrund seiner Vorgängerelemente sichtbar ist.

2. Hintergrundbild

Alle Elemente können ein Hintergrundbild festlegen;

Es können mehrere Hintergrundbilder durch Kommas getrennt festgelegt werden Das Bild wird kaskadiert, wobei die in der vorherigen Ebene geschriebene Ebene darüber liegt.

3. Hintergrundwiederholung

Wiederholung (Standard)/keine Wiederholung/Wiederholung-x/Wiederholung-y

4. Hintergrundanhang

Scrollen (Standard)/fest

5. Hintergrundposition

Pixelmethode: beginnend in der oberen linken Ecke des Bildes ist der erste Wert die horizontale Bewegungsdistanz, der zweite Wert die vertikale Bewegungsdistanz; wenn nur ein Wert angegeben wird, ist der zweite Wert standardmäßig 50 %.

Prozentsatzmethode: Der Prozentsatz wird sowohl auf das Bild als auch auf das Element angewendet und die entsprechenden Punkte überlappen sich zur Positionierung. Wenn Sie nur einen Prozentsatz angeben, bedeutet dies, dass die vertikale Richtung 50 % beträgt.

Schlüsselwortmethode: oben, rechts, unten, links, Mitte für kombinierte Positionierung; wenn nur ein Wert angegeben wird, wird der zweite Wert standardmäßig auf Mitte gesetzt.

Hinweis: Hintergrundposition kann negativ sein.

Standardmäßig reicht die Hintergrundfarbe bis unter den Rand und das Hintergrundbild befindet sich in der oberen linken Ecke des Füllbereichs.

6. Hintergrundgröße

Stellen Sie die Größe des Hintergrundbilds auf „Auto“.

Pixelmethode: Der erste Wert legt die Breite fest, und der zweite Wert legt die Höhe fest; wenn es nur einen Wert gibt, ist der zweite Wert automatisch.

Prozentsatzmethode: Berechnet basierend auf der Breite und Höhe des übergeordneten Elements.

Das Schlüsselwort cover ändert das Seitenverhältnis des Bildes nicht und deckt das gesamte Element sowohl horizontal als auch vertikal ab, was dazu führen kann, dass ein Teil des Bildes überläuft.

Das Schlüsselwort „contain“ ändert das Seitenverhältnis des Bildes nicht und streckt es so weit wie möglich, bis das gesamte Element in einer Richtung abgedeckt ist, was dazu führen kann, dass die andere Richtung nicht abgedeckt wird.

7. Hintergrundursprung

Definieren Sie die Anfangsposition des Hintergrundbilds

border-box, die obere linke Ecke des Rahmens.

padding-box, obere linke Ecke des Füllbereichs, Standardwert;

Inhaltsfeld, obere linke Ecke des Inhaltsbereichs.

8. Hintergrundclip

Die CSS3-Hintergrundclip-Eigenschaft gibt den Malbereich des Hintergrunds an.

Die Eigenschaft nimmt drei verschiedene an Werte:

•border-box – (Standard) der Hintergrund wird bis zur Außenkante des Rahmens gemalt

•padding-box – der Hintergrund wird bis zur Außenkante der Polsterung gemalt

•Inhaltsfeld – der Hintergrund wird innerhalb des Inhaltsfelds gemalt

(Englische Erklärung ist klarer)

(Englisch wird alles von W3Schools Online übernommen)

Bezüglich Hintergrundursprung und Hintergrundclip sind sie unabhängig voneinander und stören sich nicht gegenseitig.

Was die CSS-Schreibmethode des Hintergrunds betrifft, denke ich persönlich, dass sie logisch klar und hierarchisch sein sollte; insbesondere:

Hintergrund definiert das Hintergrundbild , „background-color“ definiert die Hintergrundfarbe und „background-clip“ definiert den Hintergrundanzeigebereich.

(Persönliche Meinung, nur als Referenz)

Hintergrundbild in voller Größe

Wenn wir auf einer Website ein Hintergrundbild haben möchten, das das gesamte Browserfenster abdeckt jederzeit.

Die Anforderungen lauten wie folgt:

• Füllen Sie die gesamte Seite mit dem Bild aus (kein Leerraum)

• Bild nach Bedarf skalieren

• Bild auf Seite zentrieren

• Keine Bildlaufleisten verursachen

Folgendes Das Beispiel zeigt, wie es geht. Verwenden Sie das HTML-Element (das HTML-Element hat immer mindestens die Höhe des Browserfensters). Stellen Sie dann einen festen und zentrierten Hintergrund ein. Passen Sie dann seine Größe mit der Eigenschaft „Hintergrundgröße“ an >

html {   
     background: url(img_flower.jpg) no-repeat center fixed;    
     background-size: cover;   
 }

Tipps:

Verwenden Sie die horizontale Kachelung des Hintergrundbilds, um einen wellenförmigen Randeffekt zu erzielen.

(Derzeit habe ich nur Ideen und keine Bilder gefunden, die meinen Anforderungen entsprechen.)

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich ist Weitere verwandte Inhalte finden Sie im PHP Chinese Net!

Verwandte Empfehlungen:

Über die Verwendung und Fallstricke der Aktivierung der Hardwarebeschleunigung in CSS3

Über das Schreiben von CSS-Codespezifikationen

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung des CSS-Hintergrunds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!