Mehrere Blend-Modes und Hintergrundbilder miteinander verketten
Kommentare

CSS-Properties wie zum Beispiel background-blend-mode sind für Webdesigner auf viele Arten nützlich. So können sie damit etwa ein Hintergrundbild mit dessen eigener Hintergrundfarbe verblenden – aber beispielsweise auch mit einem anderen Hintergrundbild, das dem gleichen Element hinzugefügt wurde.

Dabei lässt sich aber nicht nur ein einziger Blend-Mode anwenden, sondern sie können auch miteinander verkettet werden, wenn mehrere Hintergrundbilder vorhanden sind. Robin Rendle zeigt, wie man dafür vorgehen sollte.

Die Basics: Verblenden von Hintergrundfarbe und -bildern

Bevor es an das Verketten mehrerer Werte geht, ist es zunächst wichtig, zu verstehen, wie das background-blend-mode-Property grundsätzlich funktioniert. Tatsächlich ist die Nutzung des Properties denkbar einfach. Um ein Hintergrundbild mit einer Hintergrundfarbe zu verblenden, werden beide Properties – also background-color und background-image – sowie background-blend-mode inklusive dem gewünschten Wert auf ein einzelnes Element angewandt.

Auf ähnliche Art und Weise lassen sich auch zwei oder mehr Hintergrundbilder miteinander verblenden. Dafür werden sie einfach zu einer durch Kommata getrennten Liste hinzugefügt und der entsprechende background-blend-mode-Wert auf das Element angewandt.

Dabei wird normalerweise das erste Bild als Basis definiert und mit dem Blend-Mode-Property festgelegt, wie das zweite Bild darüber abgebildet wird. Allerdings müssen beide Bilder nicht zwingend übereinander festgelegt werden; sie können mit einer Kommata-getrennten Liste des background-position-Elements beliebig verblendet werden, um verschiedene Effekte zu erzielen.

Verketten mehrerer Hintergrundbilder und Blend-Modes

Ähnlich wie sich die Bildelemente so unabhängig voneinander positionieren lassen, können auch mehrere Bilder mit mehreren Blend-Modes verblendet werden – sprich, es lässt sich kontrollieren, wie jedes Layer von einem bestimmten Blend-Mode beeinflusst wird.

Normalerweise würde jedes Bild den aktuell angewandten Blend-Mode erben; verkettet man die Hintergrundbilder mit mehreren Blend-Modes, können zum Beispiel verschiedene Blend-Modes auf die einzelnen Bildelemente angewandt werden (siehe Screenshot).

Abb. 1: Screenshot Verkettung mehrer Blend-Modes und Hintergrundbilder

Abb. 1: Screenshot Verkettung mehrer Blend-Modes und Hintergrundbilder

Robin Rendle veranschaulicht den Vorgang in seinem Artikel mit einigen Demos und bietet gleichzeitig auch einige Code-Beispiele. In jedem Fall lassen sich so mit dem background-blend-mode-Property noch mehr Effekte erstellen, die bei der Nutzung in einer Website für einen echten Hingucker sorgen können.

Aufmacherbild: Unusual Light effects background, abstract light background, light leaks von Shutterstock / Urheberrecht: Andrea Obzerova

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -