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?

Innocence

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

Acton

Answer 2

You can use background-blend-mode but only in Chrome and Firefox.

According to the CSS Tricks article, the code looks like this:

.blended {
    background-image: url(face.jpg);
    background-color: red;
    background-blend-mode: multiply;
}

Mucro

Answer 3

Yes...sort of...

The question is a little vague but can we remove the white 'part' of an image and let us see the background color of the element behind it?

Yes we can...with mix-blend-mode.

body {
  background: blue;
  text-align: center;
}
div {
  mix-blend-mode: multiply;
  display: inline-block;
  margin: 1em auto;
}

<div>
  <img src="http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg" alt="" />
</div>

Note: this is only showing that background of the element behind the div holding the image....nothing happens if you add a background color to the wrapping div.

For that you might need yet another wrapper.

body {
  background: blue;
  text-align: center;
}
div.parent {
  display: inline-block;
  margin: 1em auto;
  background: red;
}
div.child {
  mix-blend-mode: multiply;
}

<div class="parent">

  <div class="child">
    <img src="http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg" alt="" />
  </div>

</div>

or perhaps as a background to a pseudo-element:

body {
  background: blue;
  text-align: center;
}
.child {
  width: 200px;
  height: 200px;
  background: red;
  margin: 1em auto;
  position: relative;
  background-color: red;
}
div.child::before {
  mix-blend-mode: multiply;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg);
  background-size: cover;
  z-index: 0;
}

<div class="child"></div>

Pice