I'm trying to treat an image the same way it is in a photoshop file - desaturating the image to grayscale, and then applying a color overlay with a multiply blend mode. To this end, I am styling a CSS background image with...
.someclass
{
/* grayscale */
-webkit-filter: grayscale(1);
filter: gray;
filter: grayscale(1);
filter: url(desaturate.svg#greyscale);
/* multiply */
background-color: rgba(190, 50, 50, 0.65);
background-blend-mode: multiply;
}
The problem with this is that the grayscale filter ends up desaturating red color for the blend mode. In other words, the multiply is occurring first and then the grayscale. How do I switch it so that the grayscale is applied first and then the blend mode is applied second?
I have created a fiddle (http://jsfiddle.net/g54LcoL1/1/) for the code and a screenshot (made in Photoshop) of what I would expect the the fiddle result to look like. The bottom most image, div.grayscale.multiply
, should be colored red.
💡 If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements.
The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
You can not do it with filter, but you can do it staying with blend mode for everything
the grayscale equivalent in blend is luminosity, with the image as source and a solid white as backdrop
So the background images, from bottom to top, are:
and the blend modes are luminosity and multiply
.test {
width: 400px;
height: 400px;
background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg");
background-color: white;
background-blend-mode: multiply, luminosity;
background-size: cover;
}
<div class="test"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With