Photoshop Question posted in
The official user guide can be found here.

Multiply mode in CSS? – Photoshop

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?

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search