Hintergrundeigenschaften von Cascading Style Sheets (CSS)

Mit Cascading Style Sheets (CSS), können Sie Hintergrundeigenschaften einer Reihe von verschiedenen Objekten auf einer Webseite, einschließlich der gesamten Seite, eine bestimmte Schicht, eine Tabelle, eine Tabellenzelle, und sogar Text.

Hintergrundfarbe: Kann eine Hintergrundfarbe für die meisten Objekte auf einer Seite aufgebracht werden, einschließlich Text, Tabellen, Tabellenzellen, Schichten und den Körper einer Seite einen hexadezimalen Wert verwenden. Wenn hexadezimale Farbe für jede Art angibt, denken Sie daran, die Zahl Symbol hinzuzufügen (#) Vor dem Hex-Wert, wie in # CC9900, für beste Browser-Anzeige Ergebnisse.

p {background-color: # 33ff00-}

Hintergrundbild: Sie können Bilder, wie beispielsweise eine Hintergrundfarbe, um den Hintergrund von vielen verschiedenen Objekten auf einer Web-Seite, einschließlich der Körper einer Seite, Tabellen, Tabellenzellen und -schichten Anwendung. Sie können steuern, wie die Bildkacheln (Wiederholungen) durch die Verwendung von wiederholen Attribut.

.mylayer {background-image: url (images / car.gif) -}

Hintergrund Wiederholung: Das wiederholen Attribut weist einen Browser, wie das Hintergrundbild sollte es Füllung im Bereich wiederholt werden. In der Standardeinstellung und wenn nicht anders angegeben, werden alle Hintergründe Ziegel vertikal und horizontal, um den gesamten Hintergrund Raum des Stil-Tag oder Objekt zu füllen.

body {background-image: url (images / zigzag.gif) -background-repeat: repeat-x-}

Das wiederholen Attribut hat vier Variablen:

• wiederholen: Diese Option ist für Hintergrundbilder als Standardeinstellung und Fliesen den Bildhintergrund sowohl horizontal als auch vertikal.

• repeat-x: Verwenden Sie diese Option, wenn Sie das Hintergrundbild Kachel nur entlang der horizontalen Achse werden soll. Falls gewünscht, verwenden sie in Verbindung mit der horizontalen und / oder vertikalen background-position Attribut.

• repeat-y: Verwenden Sie diese Option, wenn Sie das Hintergrundbild Kachel nur entlang der vertikalen Achse werden soll. Falls gewünscht, verwenden sie in Verbindung mit der horizontalen und / oder vertikalen background-position Attribut.

• no-repeat: Diese Einstellung zeigt das Hintergrundbild als ein einziges statisches Bild ohne in beiden Richtungen zu wiederholen.

background-attachment: Dieses Attribut bezieht sich auf, wie das Hintergrundbild mit dem Inhalt über ihm zusammenwirkt. Das Hintergrundbild kann auf drei verschiedene Arten verhalten - scrollen, fest, und erben - aber nicht alle drei werden konsequent von allen Browsern unterstützt, so sicher sein, zu prüfen, je nachdem, welche Option Sie eine Vielzahl von Browsern auswählen, die in und Browser-Versionen auf Mac und PC-Plattformen.

body {background-image: url (images / biodiesel.gif) -background-attachment: fixed-background-repeat: repeat-y-}

Hier ist eine Erklärung der verschiedenen Hintergrund Bindungsstile:

• scrollen: Dies ist die Standardoption, wie das Hintergrundbild auf der Seite befestigt ist, die die gleiche funktioniert, ob das Attribut angegeben ist oder nicht näher bezeichnete in der CSS. Mit dieser Option das Hintergrundbild scrollt zusammen mit einem beliebigen Text und andere Objekte auf der Seite.

• fest: Das fest Attribut hält das Hintergrundbild in das Browserfenster festgelegt, während Text und andere Objekte auf der Seite vorbei scrollen.

• erben: Wenn Sie diese Option angeben, erbt das Hintergrundbild die Befestigung der Regel, ob scrollen oder fest, von seinem übergeordneten Container, wie in einer Tabelle mit einer Tabellenzelle.

background-position (X): Stellen Sie die horizontale background-position Attribut, wo im Browser-Fenster angezeigt und wiederholt das Hintergrundbild zu steuern. Wählen links, Center, oder Recht oder einen beliebigen Wert eingeben px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (Prozentsatz).

p {background-image: url (images / recycle.gif) -background-repeat: repeat-x-background-position: left;}

background-position (Y): Stellen Sie die vertikale background-position Attribut, wo im Browser-Fenster angezeigt und wiederholt das Hintergrundbild zu steuern. Wählen oben, Center, oder Boden oder einen beliebigen Wert eingeben px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (Prozentsatz).

p {background-image: url (images / gogreen.png) -background-repeat: repeat-y-background-position: Zentrum}

Wenn sowohl die horizontalen und vertikalen Hintergrund Positionen müssen in der CSS angegeben werden, listet sie zusammen durch ein Leerzeichen getrennt:

p {background-image: url (images / earthsafe.jpg) -background-repeat: repeat-x-background-position: left}-Zentrum

Die horizontale Position geht immer vor der vertikalen Position, wenn die beiden kombiniert werden. Wenn diese Reihenfolge nicht eingehalten wird, machen das Element möglicherweise nicht richtig, in unerwartete Probleme bei der Anzeige führt, wenn in verschiedenen Browsern.