Zusammenfassung der Verwendung von Hintergrundattributen in CSS

HintergrundDas Hintergrundattribut ist ein wichtiges Attribut in CSS. Mit dem Hintergrundattribut können Sie verschiedene Stile eines Hintergrundelements festlegen, einschließlich der Einstellung der Farbe des gefüllten Hintergrunds, der Verwendung Ihres eigenen Bildes als Hintergrund, sodass sich das Bild horizontal und vertikal wiederholt, bis es das gesamte Element bedeckt, und der Steuerung die Position des Hintergrundbilds im Element usw. Die Verwendung von Bildern als Hintergrund kommt in einem Webseiten-Layout häufig vor. Im Allgemeinen wird das Objektbild als Hintergrundattributinstanz festgelegt. Legen Sie dann die Hintergrundfarbe fest, legen Sie dann das Bild als Hintergrund fest und prüfen Sie, ob das Bild wiederholt wird Folgen Sie dem Bild an der Objektposition. Die vorherige Hintergrundfarbe muss nicht festgelegt werden und ist nicht erforderlich. Im Allgemeinen wird ein Bild als Objekthintergrund verwendet. Wenn Sie festlegen möchten, ob das Bild wiederholt angezeigt wird, wird die Abstandsposition festgelegt. Im folgenden Inhalt werden insbesondere die verschiedenen Verwendungszwecke des Hintergrundattributs erläutert.

Zuerst können Sie kostenlose Kurse im Zusammenhang mit der chinesischen PHP-Website lernen

1. „CSS 0 Basic Einführungs-Tutorial“. " CSS-Hintergrund im Kapitelkurs

2. Sehen Sie sich den Videokurs Hintergrund und Rand in „Dark Horse Programmer CSS Video Tutorial“

Hintergrundeigenschaft 1.

Muss CSS-Kenntnisse beherrschen - Hintergrundeigenschaft

Wenn wir einen Rahmen für den Körper festlegen, werden wir feststellen, dass der Rahmen nur den Inhalt im Körper umschließt. Wenn Sie jedoch die Hintergrundfarbe für den Körper festlegen, wird der gesamte Bildschirm ausgefüllt.

Wenn Sie ein Bild als Hintergrund verwenden, wird das Bild in Bezug auf den sichtbaren Bereich des Bildschirms positioniert, nicht auf den vom Rand eingerahmten Teil. Jeder Parameter wird durch Leerzeichen getrennt, gefolgt von Farbe, Bild, Wiederholung, Fixierungsmethode und Position.

2.

Hintergrundbezogene Attribute in CSS

Prozent/Länge: Wenn es sich um einen Prozentsatz handelt, ist die Größe des Hintergrundbilds das Produkt aus dem Container mal dem Prozentsatz . Legen Sie nur eines fest und stellen Sie das zweite auf „Automatisch“ (um das gleiche Seitenverhältnis wie das ursprüngliche Hintergrundbild beizubehalten).

Wenn beide auf 100 % eingestellt sind, füllt das Hintergrundbild den Container, aber das Seitenverhältnis ändert sich. enthalten: Der Container enthält das gesamte Hintergrundbild gemäß einem festen Anteil des Hintergrundbilds. Die Größe des Hintergrundbilds wird entsprechend einem festen Verhältnis zum Hintergrundbild vergrößert, bis eine Seite die Grenze des Containers erreicht, ist die andere Seite oft leer (wenn es keine Wiederholung gibt).

Cover: Das Hintergrundbild wird entsprechend einem festen Seitenverhältnis vergrößert, bis es den gesamten Container ausfüllt (die kürzere Seite des Hintergrundbilds erreicht auch die Containergrenze). Ein Teil des Hintergrundbilds wird abgeschnitten, da es über den Container hinausgeht.

3.

Detaillierte Erläuterung des Hintergrundattributs von CSS

Im selben Element wird das Hintergrundattribut vorne geschrieben und das Hintergrundattribut, das benötigt wird einzeln eingestellt werden steht am Ende; Grund: Die vordere Welle des Jangtse-Flusses drückt die hintere Welle zurück und die vordere Welle stirbt am Strand

Mehrere Hintergrundbilder werden zum gleichen Element hinzugefügt Attribute können nur separat geschrieben werden und zusammengesetzte Attributabkürzungen können nicht verwendet werden. In verschachtelten Eltern-Kind-Elementen wird nicht empfohlen, Attribute mit demselben Namen zu schreiben. Grund: Wenn die Größe des untergeordneten Elements größer oder gleich der Größe des übergeordneten Elements ist, wird der Stil des übergeordneten Elements durch das untergeordnete Element überschrieben.

Verwenden Sie bei der tatsächlichen Arbeit mehr Hintergrundbilder und weniger Verwendung eingefügter Bilder.

4.

Detaillierte Erläuterung des neuen Hintergrunds der Hintergrundserie in CSS3

Rahmen: Ignorieren Sie den Rand und beginnen Sie direkt mit dem Kacheln ab dem Startpunkt 0,0 des Randpolsterbox: Standardwert, Polsterung ignorieren und Kachelung direkt ab dem Startpunkt 0,0 der Polsterung beginnen. Inhaltsbox: Kachelung ab dem Inhaltsteil starten, die Polsterungsposition wird reserviert. Die Polsterung wirkt sich also darauf aus

5. So legen Sie das CSS-Hintergrundbild und die Hintergrundfarbe auf Webseiten fest

CSS-Hintergrund bezieht sich hier auf das Festlegen der Hintergrundattribute von Objekten über CSS, z. B. das Festlegen des Hintergrunds durch CSS im Webseiten-Stil.

CSS-Hintergrundhintergrundfunktion: Legen Sie einen einfarbigen Hintergrund fest. Hintergrundhintergrund kann die Hintergrundfarbe des Objekts auf eine Volltonfarbe festlegen und das Bild als Hintergrund festlegen. Sie können den Hintergrund des Objekts auf ein Bild festlegen, Sie können das Bild wiederholt horizontal anordnen oder das Bild als Hintergrund des Objekts an einer beliebigen Position des Objekts festlegen.

6. Zusammenfassung und gemeinsame Nutzung von CSS-Hintergrundattributen und CSS3-Hintergrundbildeinstellungen

Hintergrund Legen Sie alle Hintergrundattribute in einer Anweisung fest

Hintergrund-Anhang-Set ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt

background-color Legt die Hintergrundfarbe des Elements fest

background-image Legt das Hintergrundbild des Elements fest

Hintergrundposition Legen Sie die Startposition des Hintergrundbilds fest

Verwandte Fragen und Antworten

1 die Ladegeschwindigkeit von CSS-Hintergrundbildern

2. Kann „background:unset“ nicht auf iOS verwendet werden? Was tun Sie also, wenn Sie die Hintergrundfarbe löschen möchten?

3.

Körperhintergrundposition

[Verwandte Empfehlungen]

1. Kostenloses PHP-Tutorial für die chinesische Website:

《CSS Online Handbuch》

2. Kostenloses Video-Tutorial auf der chinesischen PHP-Website:

„Video-Tutorial zum Erlernen von HTML auf Knopfdruck“

3 Chinesische Website:

"php.cn Dugu Jiujian (2) - CSS-Video-Tutorial"

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von Hintergrundattributen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!