7

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.

Asons
  • 84,923
  • 12
  • 110
  • 165
user2019515
  • 4,495
  • 1
  • 29
  • 42
  • Yes, you can apply opacity on the same object... Or you don't mean opacity against backdrop ? – vals Dec 13 '16 at 21:35
  • @vals The idea is that the color is 51% opacity on softlight while the background remains at 100% opacity. I don't believe using the same layer would be possible in that case. However, I just realised this might work with rgba - just tried this and that seems to work. However, the original question still remains - why is there a difference between the 2 blend modes. – user2019515 Dec 13 '16 at 21:43
  • Yes, you can use `rgba` to make background color semi-transparent without affecting the background image – Asons Dec 13 '16 at 21:46
  • A minor note, using `//` when making comments in CSS is invalid and might give you unpredictable result, use `/* */` instead – Asons Dec 13 '16 at 22:20
  • @LGSon Good point, I'm using sass though :) – user2019515 Dec 17 '16 at 02:34

3 Answers3

10

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • I might be missing something but I don't believe any of the images are blending now? They just display the original image – user2019515 Dec 13 '16 at 21:21
  • @user2019515 That is correct. Removed the sample as they don't prove anything. – Asons Dec 13 '16 at 21:24
  • It seems that the "green" colour is used in both the left and right result images though, so it seems that mix-blend-mode is using the green as well, however, likely in a different way (which I'm trying to get to the bottom off) – user2019515 Dec 13 '16 at 21:26
  • @user2019515 Made a final update ... I missed one thing how I described it for `mix-blend-mode` – Asons Dec 13 '16 at 21:45
  • @user2019515 Updated again + added a sample – Asons Dec 13 '16 at 22:01
5

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

vals
  • 61,425
  • 11
  • 89
  • 138
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

Harry S
  • 985
  • 5
  • 6