<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The mix-blend-mode properties</title>
<style>
div.demomix {background-image:url('https://i.imgur.com/vstwUv7.jpg'); padding-top:10px;}
img {width: 170px;height: auto;border:1px solid Yellow;margin:5px 4px 5px 6px;}
div.cutout {background-image: url("images/munchen.jpg"); background-size: 100% 100%; position: relative; height: 500px; margin-top:20px;}
div.text { background-color: white; color: black; font-size: 5vw; font-weight: bold;margin: 0 auto;padding: 10px;width: 50%;text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);mix-blend-mode: screen; text-transform:uppercase;}
</style>
</head>
<body>
<div class="demomix">
<div style="font-family:Monospace; margin:0px 0 0 50px; color:Yellow; white-space:pre;">NORMAL MULTIPLY SCREEN OVERLAY DARKEN</div>
<!-- this attribute applies no blending whatsoever -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: normal;">
<!-- the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: multiply;">
<!-- multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: screen;">
<!-- multiplies or screens the content depending on the background color. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: overlay;">
<!-- the background is replaced with the content where the content is darker, otherwise, it is left as it was. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: darken;">
<div style="font-family:Monospace; margin:20px 0 0 50px; color:Yellow; white-space:pre;">LIGHTEN COLOR-DODGE COLOR-BURN DIFFERENCE EXCLUSION</div>
<!-- the background is replaced with the content where the content is lighter. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: lighten;">
<!-- this attribute brightens the background color to reflect the color of the content. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: color-dodge;">
<!-- this darkens the background to reflect the content's natural color. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: color-burn;">
<!-- this subtracts the darker of the two colors from the lightest color. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: difference;">
<!-- similar to difference but with lower contrast. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: exclusion;">
<div style="font-family:Monospace; margin:20px 0 0 50px; color:Yellow; white-space:pre;"> HUE SATURATION COLOR LUMINOSITY </div>
<!-- creates a color with the hue of the content combined with the saturation and luminosity of the background. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: hue;">
<!-- creates a color with the saturation of the content combined with the hue and luminosity of the background. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: saturation;">
<!-- creates a color with the hue and saturation of the content and the luminosity of the background. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: color;">
<!-- creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute. -->
<img src="images/hibiscus.jpg" alt="Hibiscus" style="mix-blend-mode: luminosity;">
</div>
<div class="cutout">
<div class="text">München</div>
</div>
</body>
</html>
