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

Different result when using mix-blend-mode and background-blend-mode – Photoshop

I’ve noticed that when using mix-blend-mode the result is different than when using background-blend-mode even though you’re using the same blending mode.

For example, compare the 2 results below:

Image with background-blend-mode Image with mix-blend-mode

I’ve copied in my setup and JSFiddles below:

HTML

<div class="background">
  <div class="overlay"></div>
</div>

CSS

.background{
  width:200px;
  height:200px;
  //background-color:green; //toggle depending on what you want to use
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.overlay{
  width:100%;
  height:100%;
  background-color:green; //toggle depending on what you want to use
  mix-blend-mode:soft-light;
}

JSFiddle

Using mix-blend-mode: https://jsfiddle.net/p8gkna87/

Using background-blend-mode: https://jsfiddle.net/p8gkna87/1/

Some background information

I’m currently replicating a photoshop design which uses the soft-light blending mode and at the same time also uses an opacity of 51%. So it wouldn’t be able to use background-blend-mode as the opacity cannot be applied to the same object.

Tags:

3

Answers


  1. 0

    it looks like to me that mix-blend-mode also uses background-color to blend it when background-blend-mode doesn’t.
    test using and change background-color as well:
    http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-blend-mode

    Login or Signup to reply.
  2. 0

    background-blend-mode blends with its background-image and its background-color.

    mix-blend-mode blends with its backdrop, the part what is behind itself, and its background-color.

    Here is an article describing mix-blend-mode quite well:

    Put in another way, and in your case, with your mix-blend-mode you blend a green color on top of the image, with your background-blend-mode you do the opposite.

    So by having the same layer order, both blend-modes look the same

    .background,
.background2{
  display: inline-block;
}

.background{
  width:200px;
  height:200px;
  background-color:green;
}
.overlay{
  width:100%;
  height:100%;
  mix-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.background2{
  width:200px;
  height:200px;
  background-color:green;
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}
    <div class="background">
  <div class="overlay"></div>
</div>

<div class="background2">
</div>
    Login or Signup to reply.
  3. 0

    You have already a good answer from LGSon.

    Just to clarify it a little bit further:

    The layers that you have here are, from botton to top:

    1. background element background-color
    2. background element image
    3. overlay element background-color

    The background-blendmode applies inside the background element, in this case layer 2 over layer 1

    The mix-blend-mode applies element 3 over the result of 1 + 2

    So, if only one of them is efffective, the order is the inverse

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search