Zum Inhalt springen

Backgrounds

background-color

#background-color Legt die Farbe des Hintergrunds des Elements fest. default background-color: transparent; Standardmäßig ist die Hintergrundfarbe transparent, was bedeutet, dass es keine Hintergrundfarbe gibt. Hello World background-color: red; Sie können eine der 140+ Farbnamen wählen. Hello World background-color: #05ffb0;… 

background-clip

#background-clip Legt fest, wie weit sich der Hintergrund innerhalb des Elements erweitern soll. default background-clip: border-box; The background extends completely throughout the element, even under the border. Hello world background-clip: padding-box; Der Hintergrund erstreckt sich nur bis zum Rand… 

background-size

#background-size Bestimmt die Größe des Hintergrundbildes. default background-size: auto auto; Das Hintergrundbild behält seine originale Größe bei. Zum Beispiel ist dieses Hintergrundbild 960px x 640px groß. Sein Seitenverhältnis ist 3 mal 2. Es ist größer als sein Container (der… 

background-image

#background-image Legt ein Bild als Hintergrund für das Element fest. default background-image: none; Entfernt jedes Hintergrundbild. Hello world background-image: url(/images/jt.png); Verwendet das im url Pfad definierte Bild. Dieser Pfad kann entweder relativ (zur css-Datei) oder absolut sein (wie http://cssreference.io/images/jt.png).… 

background-origin

#background-origin Bestimmt den Ursprung des Hintergrundbildes. default background-origin: padding-box; Das Hintergrundbild beginnt am Rand des Rahmens: innerhalb der Auffüllung, aber nicht des Rahmens. Hello world background-origin: border-box; Das Hintergrundbild beginnt unter dem Rahmen. Hello world background-origin: content-box; Das Hintergrundbild… 

background

#background Kurzschreibweise für background-image background-position background-size background-repeat background-origin background-clip background-attachment und background-color.

background-attachment

#background-attachment Legt fest, wie sich das Hintergrundbild beim Scrollen der Seite verhalten soll. default background-attachment: scroll; Das Hintergrundbild bewegt sich mit der Seite. Es wird auch positioniert und ändert seine Größe entsprechend dem Element, auf das es… 

background-repeat

#background-repeat Legt fest, wie sich das Hintergrundbild, ausgehend von der Hintergrundposition, im Hintergrund des Elements wiederholt. default background-repeat: repeat; Das Hintergrundbild wird sich sowohl horizontal als auch vertikal wiederholen. Hello world background-repeat: repeat-x; Das Hintergrundbild wird sich nur horizontal… 

background-position

#background-position Bestimmt die Position des Hintergrundbildes. default background-position: 0% 0%; Das Hintergrundbild wird bei 0% auf der horizontalen Achse und 0% auf der vertikalen Achse positioniert, d.h. in der linken oberen Ecke des Elements. Hello world background-position: bottom right;… 

mix-blend-mode

#mix-blend-mode Legt fest, wie das Element mit dem Hintergrund vermischt werden soll. default mix-blend-mode: normal; Das Element ist nicht mischbar. Hello world Hello world Hello world mix-blend-mode: multiply; Das Element verwendet den Mischmodus multiply. Hello world Hello world Hello… 

Nach oben