background-blend-mode Property
suggest change.my-div {
width: 300px;
height: 200px;
background-size: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
background-blend-mode:saturation;
}<div class="my-div">Lorem ipsum</div>See result here: https://jsfiddle.net/MadalinaTn/y69d28Lb/
CSS Syntax: background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents