Hintergründe

Der CSS-Podcast – 053: Hintergrund

Hintergründe

Hinter jeder CSS-Box befindet sich ein spezialisierter Layer, der als Hintergrund-Layer bezeichnet wird. CSS bietet eine Vielzahl von Möglichkeiten, um sinnvolle Änderungen vorzunehmen, einschließlich mehrerer Hintergründe.

Hintergrundebenen sind am weitesten vom Nutzer entfernt und werden hinter dem Inhalt einer Box gerendert, beginnend mit dem Bereich padding-box. Dadurch darf sich die Hintergrundebene nicht mit Rahmen überlappen.

Hintergrundfarbe

Einer der einfachsten Effekte, die Sie auf eine Hintergrundebene anwenden können, ist das Festlegen der Farbe. Der Anfangswert von background-color ist transparent. Damit ist der Inhalt eines übergeordneten Elements sichtbar. Hinter anderen auf dieses Element gemalten Elementen befindet sich ein gültiger Farbsatz für eine Hintergrundebene.

Hintergrundbilder

Auf der Ebene background-color kannst du mithilfe der Eigenschaft background-image ein Hintergrundbild hinzufügen. Ein background-image akzeptiert Folgendes:

• Eine Bild-URL oder ein Daten-URI, die die CSS-Funktion url verwendet.
• Ein Bild, das dynamisch mit einer Farbverlauf-CSS-Funktion erstellt wird.

Ein Hintergrundbild mit der CSS-Funktion url festlegen

CSS-Farbverlauf-Hintergründe

Es gibt mehrere CSS-Funktionen für den Farbverlauf, mit denen Sie ein Hintergrundbild generieren können, wenn zwei oder mehr Farben übergeben werden.

Unabhängig von der verwendeten Farbverlaufsfunktion wird das resultierende Bild direkt an die Größe des verfügbaren Platzes angepasst.

Die Demo zeigt ein Beispiel für das Anwenden eines Hintergrundbilds mithilfe von Farbverlaufsfunktionen:

Sich wiederholende Hintergrundbilder

Standardmäßig wiederholen sich Hintergrundbilder horizontal und vertikal, um die gesamte Fläche der Hintergrundebene auszufüllen.

Ändern Sie dies, indem Sie das Attribut background-repeat mit einem der folgenden Werte verwenden:

• repeat: Das Bild wird in der verfügbaren Fläche wiederholt und nach Bedarf zugeschnitten.
• round: Das Bild wird horizontal und vertikal wiederholt, um so viele Instanzen in den verfügbaren Platz zu passen. Wenn der verfügbare Platz zunimmt, wird das Bild gestreckt. Nach einer Streckung auf die Hälfte der ursprünglichen Breite des Bildes wird es komprimiert, um weitere Bildinstanzen hinzuzufügen.
• space: Das Bild wird horizontal und vertikal wiederholt, damit es in den verfügbaren Bereich passt, ohne das Bild zuzuschneiden. Dabei werden je nach Bedarf Teile des Bilds entfernt. Sich wiederholende Bilder berühren die Ränder der Fläche, die eine Hintergrundebene einnimmt, und der weiße Raum ist gleichmäßig zwischen ihnen verteilt.

Mit der Eigenschaft background-repeat können Sie das Verhalten für die X- und Y-Achse unabhängig festlegen. Mit dem ersten Parameter wird das horizontale Wiederholungsverhalten festgelegt, mit dem zweiten die vertikale Wiederholung.

Wenn du einen einzelnen Wert verwendest, wird er sowohl auf horizontale als auch auf vertikale Wiederholungen angewendet.

Die Kurzschreibweise enthält auch praktische Ein-Wort-Optionen, um Ihre Absicht deutlicher zu machen.

Mit dem Wert repeat-x wird ein Bild nur horizontal wiederholt. entspricht dies repeat no-repeat.

In der folgenden Demo werden diese Funktionen des Attributs background-repeat demonstriert:

Hintergrundposition

Sie haben vielleicht bemerkt, dass einige Bilder im Web mit einer background-repeat: no-repeat-Deklaration versehen werden, sodass diese Bilder oben links in ihrem Container angezeigt werden.

Die Anfangsposition von Hintergrundbildern ist oben links. Mit der Eigenschaft background-position können Sie dieses Verhalten ändern, indem Sie die Bildposition verschieben.

Wie bei background-repeat können Sie mit der Eigenschaft background-position Bilder entlang der X- und Y-Achse unabhängig voneinander mit zwei Werten positionieren.

Wenn CSS-Längen und Prozentsätze verwendet werden, entspricht der erste Parameter der horizontalen Achse und der zweite Parameter der vertikalen Achse.

Wenn Keywords nur verwendet werden, spielt die Reihenfolge der Keywords keine Rolle:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

Das Attribut background-position hat auch eine praktische Abkürzung für einen Wert: wird der ausgelassene Wert in 50% aufgelöst. Im folgenden Beispiel wird dies anhand der Keywords veranschaulicht, die von der background-position-Eigenschaft akzeptiert werden:

Zusätzlich zu den Standardformen mit zwei und einem Parameter: Das Attribut background-position akzeptiert bis zu vier Parameter.

Wenn drei oder vier Parameter verwendet werden, müssen die Keywords top, left, right oder bottom einer CSS-Länge oder einem Prozentsatz vorangestellt werden, damit der Browser berechnen kann, von welchem Rand der CSS-Box der Offset stammen soll.

Bei drei Parametern kann eine CSS-Länge oder ein CSS-Wert der zweite oder dritte Parameter und die anderen beiden Keywords sein. Das erfolgreiche Keyword wird verwendet, um die Kante zu bestimmen, der die CSS-Länge oder der CSS-Wert entspricht. Der Offset des anderen angegebenen Keywords ist auf 0 gesetzt.

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

Wenn background-position: top left 20% auf ein CSS-Hintergrundbild angewendet wird, wird das Bild oben im Feld platziert. Der 20%-Wert steht für einen 20 %-Versatz vom linken Rand des Feldes (auf der x-Achse).

Wenn background-position: top 20% left auf ein CSS-Hintergrundbild angewendet wird, entspricht der Wert von 20% dem oberen Rand des CSS-Felds (auf der Y-Achse) mit einem Versatz von 20 %. Das Bild wird links vom Feld platziert.

Bei der Verwendung von vier Parametern werden die beiden Keywords mit zwei Werten gekoppelt, die einem Offset für die Ursprünge jedes angegebenen Keywords entsprechen. Wenn background-position: bottom 20% right 30% auf ein Hintergrundbild angewendet wird, wird das Hintergrundbild 20% vom unteren Rand und 30% vom rechten Rand des CSS-Feldes entfernt platziert.

In der folgenden Demo wird dieses Verhalten veranschaulicht:

Hier sind weitere Beispiele für die Verwendung der background-position-Eigenschaft mit einer Mischung aus CSS- und Keyword-Werten:

Hintergrundgröße

Mit der Eigenschaft background-size wird die Größe von Hintergrundbildern festgelegt. Die Größe von Hintergrundbildern richtet sich standardmäßig nach ihrer tatsächlichen (tatsächlichen) Breite und Höhe sowie ihrem Seitenverhältnis.

Die background-size-Eigenschaft verwendet CSS-Längen- und Prozentwerte oder bestimmte Keywords. Die -Eigenschaft akzeptiert bis zu zwei Parameter, mit denen Sie die Breite und Höhe eines Hintergrunds unabhängig ändern können.

Für die Property background-size sind folgende Keywords zulässig:

• auto: Bei unabhängiger Verwendung wird die Größe des Hintergrundbilds an seine eigene Breite und Höhe angepasst. Wenn auto zusammen mit einem anderen CSS-Wert für die Breite (erster Parameter) oder die Höhe (zweiter Parameter) verwendet wird, wird die auf auto festgelegte Größe so angepasst, dass das natürliche Seitenverhältnis des Bildes erhalten bleibt. Dies ist das Standardverhalten der Eigenschaft background-size.
• cover: Deckt den gesamten Bereich der Hintergrundebene ab. Das kann bedeuten, dass das Bild gestreckt oder zugeschnitten ist.
• contain: Die Bildgröße wird so angepasst, dass sie den Platz ausfüllt, ohne dass das Bild gestreckt oder zugeschnitten wird. Daher kann leer bleiben, in der das Bild wiederholt wird, es sei denn, background-repeat ist auf no-repeat gesetzt.

Die letzten beiden Parameter sind für die eigenständige Verwendung ohne weiteren Parameter vorgesehen.

In der folgenden Demo sehen Sie diese Keywords in Aktion:

Eine Demo zeigt, wie diese Keywords auf background-size angewendet werden:

Anhang im Hintergrund

Mit der Eigenschaft background-attachment können Sie das feste Positionsverhalten von Hintergrundbildern (Bilder einer Hintergrundebene) ändern, sobald die Ebene auf einem Bildschirm sichtbar ist.

Drei Keywords werden akzeptiert: scroll, fixed und local.

Das Standardverhalten des Attributs background-attachment ist der Anfangswert von scroll. Wenn mehr Platz benötigt wird, bewegen sich die Bilder mit diesem Raum innerhalb der Hintergrundebene, die durch die Grenzen der CSS-Box festgelegt wird.

Mit dem Wert fixed wird die Position der Hintergrundbilder im Darstellungsbereich festgelegt.

Sobald der Platz der Bilder des Hintergrund-Layers vom Bildschirm aus gescrollt (oder gerendert) werden muss, bleiben die Bilder innerhalb der Hintergrundebene an ihrer ursprünglichen Position fixiert, bis die gesamte Ebene vom Darstellungsbereich aus dem Bildschirm gescrollt wird.

Mit dem Schlüsselwort local kann die Position von Hintergrundbildern relativ zum Inhalt des Elements festgelegt werden. Hintergrundbilder bewegen sich jetzt entlang des von ihnen eingenommenen Raums, da dieser Bereich innerhalb und außerhalb der Grenzen der CSS-Box gerendert wird (in der Regel aufgrund von Scroll-, 2D- oder 3D-Transformationen).

Hintergrundherkunft

Mit der Eigenschaft background-origin können Sie den Hintergrundbereich eines bestimmten Feldes ändern. Die von der Eigenschaft akzeptierten Werte entsprechen den Regionen border-box , padding-box und content-box eines Felds .

Probieren Sie diese Optionen mit der folgenden Demo aus:

Hintergrundclip

Mit der Eigenschaft background-clip wird gesteuert, was von einer Hintergrundebene visuell zu sehen ist, unabhängig von den durch die Eigenschaft background-origin erstellten Grenzen.

Wie bei background-origin können die Regionen border-box, padding-box und content-box angegeben werden, je nachdem, wo eine CSS-Hintergrundebene gerendert werden kann. Bei Verwendung dieser Keywords wird der Hintergrund abgeschnitten, der größer als der angegebene Bereich ist.

Die Eigenschaft background-clip akzeptiert auch das Keyword text, das den Hintergrund so abschneidet, dass er nicht weiter als der Text im Inhaltsfeld ist. Damit dieser Effekt im eigentlichen Text in einem CSS-Feld deutlich wird, muss der Text teilweise oder vollständig transparent sein.

Eine relativ neue Property. Zum Zeitpunkt der Veröffentlichung dieses Dokuments benötigen Chrome und die meisten Browser das Präfix -webkit-, um diese Property verwenden zu können.

Mehrere Hintergründe

Wie zu Beginn des Moduls erwähnt, können mit der Hintergrundebene mehrere Unterebenen definiert werden. Der Einfachheit halber bezeichne ich diese Unterebenen als Hintergründe.

Mehrere Hintergründe werden von oben nach unten definiert. Der erste Hintergrund ist dem Nutzer am nächsten, der letzte ist am weitesten vom Nutzer entfernt.

Der einzige Hintergrund bzw. die letzte Ebene wird vom Browser als endgültige Hintergrundebene festgelegt. Nur dieser Ebene darf eine background-color zugewiesen werden.

Mehrere Ebenen können mithilfe der meisten hintergrundbezogenen CSS-Eigenschaften, die durch Kommas getrennt sind, individuell konfiguriert werden, wie im Code-Snippet und in der Live-Demo unten gezeigt.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

Die Abkürzung für den Hintergrund

Um die Gestaltung der Hintergrundebene einer Box zu vereinfachen, insbesondere wenn mehrere Hintergrundebenen gewünscht sind, gibt es eine Kurzschreibweise, die dem folgenden Muster folgt:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

Die Reihenfolge ist in der Kurzform der Deklaration mehrerer Hintergründe wichtig. Die Werte für Position und Größe müssen jeweils durch einen Schrägstrich (/) getrennt angegeben werden. Wenn Sie das Ursprungs- und das Clipverhalten in der richtigen Reihenfolge deklarieren, können Sie Keywords festlegen, die gleichzeitig für beide gültig sind

Die folgende Deklaration schneidet den Hintergrund ab und bezieht sich auf das Inhaltsfeld:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Unter Berücksichtigung dieser kurzen Semantik könnten die vorherigen hintergrundbezogenen Deklarationen des Code-Snippets wie folgt umformuliert werden:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Wissen testen

Testen Sie Ihr Wissen über CSS-Hintergründe