Zusammenfassende Einführung in den CSS-Hintergrund

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 nicht das Seitenverhältnis des Bildes, sondern 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 wurde vollständig 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.)

Die obige Zusammenfassung des CSS-Hintergrunds ist der gesamte vom Herausgeber geteilte Inhalt, den ich hoffe Geben Sie eine Referenz. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere CSS-Hintergrundzusammenfassungen und verwandte Artikel finden Sie auf der chinesischen PHP-Website!