Die umfassendste Zusammenfassung von Hintergrund-Tags in CSS

Wir verwenden häufig Hintergrundinformationen in der CSS-Entwicklung. Dieser Artikel bietet Ihnen hauptsächlich eine Zusammenfassung des CSS-Hintergrunds. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und als Referenz geben, ich hoffe, es kann allen helfen.

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 Hintergrundbilder festlegen, durch Kommas getrennt; die Ebenen werden kaskadiert vorne sind oben.

3. Hintergrundwiederholung

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

4. Hintergrundanhang

scrollen (Standard)/fest

5. Hintergrundposition

Pixelmethode: Nehmen Sie die obere linke Ecke des Bildes als Startpunkt, der erste Wert ist die horizontale Bewegungsentfernung und der Der zweite Wert ist die vertikale Bewegungsdistanz. Wenn nur ein Wert angegeben wird, beträgt 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

Rahmenbox, 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 Werte an:

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

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

• Inhaltsfeld – der Hintergrund wird innerhalb des Inhaltsfelds gemalt

(englische Erklärung ist klarer)

(Englisch wurde vollständig von W3Schools Online übernommen)

Über den Hintergrund -Origin und Hintergrundclip, sie sind unabhängig voneinander und stören sich nicht gegenseitig.

Was die CSS-Schreibmethode „Hintergrund“ betrifft, denke ich persönlich, dass sie logisch und hierarchisch sein sollte, insbesondere:

Hintergrund definiert das Hintergrundbild, Hintergrundfarbe definiert die Hintergrundfarbe und Hintergrundclip 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 jederzeit das gesamte Browserfenster abdeckt .

Die Anforderungen lauten wie folgt:

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

• Skalieren Sie das Bild nach Bedarf

• Bild auf der Seite zentrieren

• Keine Bildlaufleisten verursachen

Das folgende Beispiel zeigt, wie es geht; Verwenden Sie das HTML-Element (das HTML-Element hat immer mindestens die Höhe des Browserfensters). Legen Sie dann einen festen und zentrierten Hintergrund fest und passen Sie dessen Größe mit der Eigenschaft „Hintergrundgröße“ an:

CSS-Code Inhalt in die Zwischenablage kopieren

html {
Hintergrund: url(img_flower.jpg) keine Wiederholungsmitte behoben;
Hintergrundgröße: Cover;

3. }

4. 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.)

Verwandte Empfehlungen:

Fünf CSS-Methoden zur Verwendung von Tabellen zur Implementierung allgemeiner Layouts

Detaillierte CSS3-Einführung in das Hintergrundgrößenattribut

Das obige ist der detaillierte Inhalt vonDie umfassendste Zusammenfassung von Hintergrund-Tags in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!