Blend mode with parent DIV

Question

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 could directly blend the image: https://www.w3schools.com/cssref/css3_pr_filter.asp — Azu, Dec 06 '21 at 16:29
There is a non-background equivalent of that properly: [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode), which could be used on a regular image element, though the browser support doesn't go back particularly far, which could be an issue if you need to handle legacy browsers. — DBS, Dec 06 '21 at 16:30
Thanks! @Azu, the CSS filter property doesn't seem to support "multiply." I could reduce the opacity to make it blend, but that will make it lighter too. — Gaelen, Dec 06 '21 at 16:46

score 2 · Accepted Answer · answered Dec 06 '21 at 16:40

you need to put the img inside a div, like this:

<div class="container">
    <img src="img.png" />
</div>

And apply following styles to the parent div: (I'm using 250x100 as image size)

width: 250px;
height: 100px;
background-color: red;

And the following styles to the img: (Need to have to same width and height like above)

width: 25px;
height: 100px;
mix-blend-mode: multiply;

So you're mix-blending the background-color of the parent div with the img which is inside the parent div. Should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            width: 250px;
            height: 100px;
            background-color: red;
        }

        .container img {
            width: 250px;
            height: 100px;
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="https://images.unsplash.com/photo-1633113089631-6456cccaadad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
</body>
</html>

Rounin · Answer 2 · 2021-12-06T21:43:24.660

If you need browser-compatibility beyond mix-blend-mode...

You won't get exactly the same visual effect but you can:

set an <img> inside a <div>

and then use a combination of:

background-color on the <div>

and:

filter: grayscale()
opacity

on the <img>.

Working Example:

.test,
.test img {
  position: relative;
  float: left;
  width: 240px;
  height: 160px;
}

.test-1 {
  margin-right: 12px;
  background-image: url('https://picsum.photos/240/160');
  background-color: red;
  background-blend-mode: multiply;
}

.test-2 img {
  filter: grayscale(100);
  opacity: 0.5;
}

.test-2 {
  background-color: rgb(255, 0, 0);
}

<div class="test test-1" title="Test Image 1 (CSS background-image)"></div>

<div class="test test-2" title="Test Image 2 (HTML &lt;img&gt;)">
  <img src="https://picsum.photos/240/160" alt="Test Image 2" />
</div>

Blend mode with parent DIV

2 Answers2