The standard way to blend an image with a colour is to use the following CSS:
background-image: url(photo.jpg);
background-color: red;
background-blend-mode: multiply;
I want to do this without using CSS to specify the photo, because the IMG is already being generated by the PHP of a Wordpress theme, which I don't want to mess with.
Is there a way of applying a blend mode to an IMG so that it blends with its parent DIV (or any element higher up the hierarchy)? That way I could use CSS to apply the blend mode to the IMG and a background colour to its parent DIV. (I can't seem to apply a background colour directly to an IMG).
Thanks! I hope that makes sense.
you need to put the
img
inside adiv
, like this:And apply following styles to the parent
div
: (I'm using 250x100 as image size)And the following styles to the
img
: (Need to have to samewidth
andheight
like above)So you're
mix-blend
ing thebackground-color
of the parentdiv
with theimg
which is inside the parentdiv
. Should look like this: