Die EU-Urheberrechtsreform wird das Internet, wie wir es kennen, grundlegend verändern – wenn sie denn in der finalen Abstimmung angenommen wird. Das können wir aber immer noch verhindern!
Weitere Informationen: https://juliareda.eu/2019/02/artikel-13-endgueltig/
CSS/Eigenschaften/Hintergrundfarben und -bilder/background-blend-mode
Mit der background-blend-mode-Eigenschaft können Sie festlegen, wie sich die Hintergrundbilder eines Elements, sowie dessen Hintergrundfarbe, miteinander vermischen.
Details: caniuse.com
Information
div {
width: 250px;
height: 250px;
margin: 0 3em;
background-image: url("Selflogo.png"), url("Rainbow.jpg");
background-repeat: no-repeat, no-repeat;
background-position: center, center;
box-shadow: 5px 5px 5px 0 #aaaaaa;
background-blend-mode: normal;
}
Inhaltsverzeichnis
Blend-Modi[Bearbeiten]
Die (Anzahl der) Werte der Blend-Modi sollten zu den in der background-image-Eigenschaft definierten Bildern passen. Stimmt die Anzahl nicht überein, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blend-Modus zugeordnet werden kann.
Ein Blend-Modus ist eine Rechenmethode um den endgültigen Farbwert eines Pixels zu berechnen, wenn sich verschiedene Ebenen überlappen. Jeder Blendmodus verwendet für jeden einzelnen Bildpunkt die Farbwerte von Vorder- und Hintergrund, berechnet die Vermischung und gibt einen Farbwert zurück. Die endgültige, sichtbare Schicht ist das Ergebnis dieser Berechnung aller übereinanderliegenden Pixel der vermischten Ebenen.
<h1>Demonstration von Blendmodi</h1>
Die Erläuterungen gehen von einer Hintergrundfarbe und einer Vordergrundfarbe aus.
Folgende Werte sind möglich:
-
normal
: keine Vermischung, der Farbwert ist der des Vordergrundes, Standardwert -
multiply
: die Farbwerte werden multipliziert, das Ergebnis ist nicht heller als die Ausgangsfarben -
screen
: die Farbwerte der Komplementärfarben werden multipliziert, das Ergebnis ist nicht dunkler als die Ausgangsfarben -
overlay
:multiply
oderscreen
, abhängig von der Hintergrundfarbe -
darken
: die dunklere der beiden Farben -
lighten
: die hellere der beiden Farben -
color-dodge
: hellt die Hintergrundfarbe auf -
color-burn
: dunkelt die Hintergrundfarbe ab -
hard-light
:multiply
oderscreen
, abhängig von der Vordergrundfarbe -
soft-light
:darken
oderlighten
, abhängig von den Farbwerten -
difference
: die dunklere Farbe wird von der helleren subtrahiert -
exclusion
: ähnlich wiedifference
-
hue
: erzeugt eine Farbe mit dem Farbton der Vordergrundfarbe und der Sättigung und Helligkeit der Hintergrundfarbe -
saturation
: erzeugt eine Farbe mit der Sättigung der Vordergrundfarbe und dem Farbton und der Helligkeit der Hintergrundfarbe -
color
: erzeugt eine Farbe mit dem Farbton und der Sättigung der Vordergrundfarbe und der Leuchtkraft der Hintergrundfarbe -
luminosity
: erzeugt eine Farbe mit der Leuchtkraft der Vordergrundfarbe und dem Farbton und der Sättigung der Hintergrundfarbe
hue
, saturation
, color
und luminosity
nicht.
- Screenshots der Ergebnisse
Vertauscht man die Reihenfolge der Bilder, ändern sich auch einige Ergebnisse. So liefert bei vertauschten Grafiken etwa overlay
dasselbe Resultat wie hard-light
, wenn die Grafiken unvertauscht bleiben.
- Screenshots der Ergebnisse
Bildquelle[Bearbeiten]
Fazit[Bearbeiten]
Auch wenn es sicherlich nicht viele praktische Anwendungsmöglichkeiten für diese Eigenschaft gibt, lassen sich so doch spektakuläre Effekte erzielen, für die Sie bis jetzt teure Grafik-Programme benötigten.
Weblinks[Bearbeiten]
- Webkrauts: Blend-Modes
- Wikipedia: Blend modes (Englisch)