CSS-Hintergrundleitfaden

Ursprünglicher Link: Hintergründe in CSS: Alles, was Sie wissen müssen
Übersetzungslink: CSS-Hintergrundleitfaden

Bitte beachten Sie beim Nachdruck das Urheberrecht und die Links

Der Hintergrund ist ein wichtiger Teil von CSS und gehört zu den Grundkenntnissen von CSS, die Sie kennen müssen. In diesem Artikel wird die grundlegende Verwendung des CSS-Hintergrunds (Hintergrund) behandelt, einschließlich Attributen wie Hintergrundanhang usw., und außerdem werden einige gängige Techniken zum Hintergrund (Hintergrund) sowie zum Hintergrund (Hintergrund) in CSS3 (einschließlich 4) vorgestellt neu die Hintergrundeigenschaft).

Hintergrund in CSS2

Überblick

Es gibt 5 Haupthintergrundeigenschaften in CSS2:

• Hintergrundfarbe: Gibt die Farbe an, mit der der Hintergrund gefüllt werden soll.
• Hintergrundbild: Referenzbild als Hintergrund.
• Hintergrundposition: Gibt die Position des Hintergrundbilds des Elements an.
• Hintergrundwiederholung: Bestimmt, ob das Hintergrundbild wiederholt werden soll.
• Hintergrundanhang: Legt fest, ob das Hintergrundbild mit der Seite scrollt.

Diese Eigenschaften können alle zu einer abgekürzten Eigenschaft zusammengefasst werden: Hintergrund. Ein wichtiger zu beachtender Punkt ist, dass der Hintergrund den gesamten Inhaltsbereich des Elements einnimmt, einschließlich Abstand und Rand, jedoch nicht den Rand des Elements. Es funktioniert gut in Firefox, Safari, Opera und IE8, aber in IE6 und IE7 enthält der Hintergrund keinen Rand.

Grundlegende Eigenschaften

Hintergrundfarbe

Die Eigenschaft „Hintergrundfarbe“ füllt den Hintergrund mit einer Volltonfarbe. Es gibt viele Möglichkeiten, diese Farbe anzugeben, und die folgenden Methoden führen alle zum gleichen Ergebnis.

Hintergrundfarbe: blau;
Hintergrundfarbe: rgb(0, 0, 255);
Hintergrundfarbe: #0000ff;

Die Hintergrundfarbe kann auch auf transparent gesetzt werden, wodurch darunter liegende Elemente sichtbar werden.

Hintergrundbild

Das Attribut „Hintergrundbild“ ermöglicht die Angabe eines Bildes, das im Hintergrund angezeigt werden soll. Kann in Verbindung mit Hintergrundfarbe verwendet werden. Wenn sich das Bild also nicht wiederholt, werden die nicht vom Bild abgedeckten Bereiche mit der Hintergrundfarbe gefüllt. Der Code ist sehr einfach. Denken Sie daran, dass der Pfad relativ zum Stylesheet ist. Im folgenden Code befinden sich das Bild und das Stylesheet daher im selben Verzeichnis.

Hintergrundbild: url(image.jpg);

Wenn sich das Bild jedoch in einem Unterverzeichnis namens „images“ befindet, sollte es wie folgt lauten:

Hintergrundbild: url(images/image.jpg);

Tangbantomatoes: Verwenden Sie ../, um das Verzeichnis der oberen Ebene anzugeben, z. B. „Hintergrundbild“: url(../images/image.jpg); gibt an, dass sich das Bild im Unterverzeichnis „images“ im Verzeichnis der oberen Ebene befindet Stylesheet. Es ist etwas kompliziert, aber das sollte jeder bereits wissen, deshalb werde ich nicht näher darauf eingehen. Alle Rechte vorbehalten. Bitte behalten Sie den Link beim Nachdruck bei.