Multiply mode in CSS?

Question

In Photoshop if you import a JPG image with a white background into a document with a blue background, you can make the white background of the image disappear by setting the image to "multiply" mode.

Can I do exactly the same thing with CSS alone?

Answer 1

In CSS you can use mix-blend-mode

The mix-blend-mode CSS property describes how an element content should blend with the content of the element that is below it and the element's background.

Snippet

body {
  margin: 0;
  background: url(http://lorempixel.com/1200/1200) no-repeat 0 0 / cover
}
img {
  mix-blend-mode: multiply;
}

<img src="//placehold.it/300" />

Or you can use background-blend-mode

The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color.

Snippet

div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: multiply;
}

<div></div>

IE doesn't support both, see Support here and here