CSS properties - mix-blend-mode

revision:

mix-blend-mode property

- specifies how an element's content should blend with its direct parent background.

CSS syntax : mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

Property values:

normal : this is default. Sets the blending mode to normal

multiply : sets the blending mode to multiply

screen : sets the blending mode to screen

overlay : sets the blending mode to overlay

darken : sets the blending mode to darken

lighten : sets the blending mode to lighten

color-dodge : sets the blending mode to color-dodge

color-burn : sets the blending mode to color-burn

difference : sets the blending mode to difference

exclusion : sets the blending mode to exclusion

hue : sets the blending mode to hue

saturation : sets the blending mode to saturation

color : sets the blending mode to color

luminosity : sets the blending mode to luminosity

JavaScript syntax: object.style.mixBlendMode="darken"

example: mix-blend-mode property
cartoon cartoon cartoon cartoon cartoon cartoon cartoon cartoon cartoon cartoon cartoon cartoon cartoon cartoon
code: 
                <div>
                        <div class="container">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="normal" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="multiply" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="screen" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="overlay" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="darken" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="lighten" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="color-dodge" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="color-burn" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="difference" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="exclusion" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="hue" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="saturation" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="color" width="150" height="150">
                            <img src="../pics/cartoon.jpg" alt="cartoon" class="luminosity" width="150" height="150">
                        </div>
                    </div>
                    <style>
                        .container {background-color: lightblue; height: 20vw; width: 33vw;}
                        img {width: 20%; height: auto; float: left; }
                        .normal {mix-blend-mode: normal;}
                        .multiply {mix-blend-mode: multiply;}
                        .screen {mix-blend-mode: screen;}
                        .overlay {mix-blend-mode: overlay;}
                        .darken {mix-blend-mode: darken;}
                        .lighten {mix-blend-mode: lighten;}
                        .color-dodge {mix-blend-mode: color-dodge;}
                        .color-burn {mix-blend-mode: color-burn;}
                        .difference {mix-blend-mode: difference;}
                        .exclusion {mix-blend-mode: exclusion;}
                        .hue {mix-blend-mode: hue;}
                        .saturation {mix-blend-mode: saturation;}
                        .color {mix-blend-mode: color;}
                        .luminosity {mix-blend-mode: luminosity;}
                    </style>