Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why don't CSS blend modes work when applied against the document body?

Here's an example of CSS blend modes working against a specified "background" element:

body {
  position: relative;
}

.background {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(red, blue);
}

.blend {
  background: green;
  mix-blend-mode: difference;
}
<body>
  <div class="background"></div>
  <div class="blend">BLEND ME</div>
</body>

And here's an example of the blend mode not applying over the body:

body {
  background-image: linear-gradient(red, blue);
  background-size: 100%;
  background-repeat: no-repeat;
}

.blend {
  background: green;
  mix-blend-mode: difference;
}
<body>
  <div class="blend">BLEND ME</div>
</body>

What gives? Is the body element not considered when calculating CSS blend modes? Does this apply in all browsers? Who am I and why am I here? This came up as an issue when attempting to implement dynamic (via scroll) blending over a body with background-attachment: fixed.

UPDATE: This appears to only apply in Chrome; Firefox/Safari behave expectedly - what's up with Chrome?

like image 371
benjaminben Avatar asked Sep 22 '17 07:09

benjaminben


People also ask

Why does mix blend-mode not work?

The reason why it doesn't work is that the white sections don't really have a white background. They have no background-color set, so they fall back to the default value of transparent . Visually this is manifested as a white color, but to the compositor it will still be transparent .

Which CSS property is used to set the blend-mode?

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

What does exclusion blending mode do?

Exclusion. Exclusion is very similar to Difference. Blending with white inverts the base color values, while blending with black produces no change. However, Blending with 50% gray produces 50% gray.

How do you blend text with background in CSS?

mix-blend-mode is a CSS property that defines how the content of an element should blend with the content of the element's parent and its background. With this, you can create nice blends and colors for parts of an element's content depending on its direct background.


1 Answers

The body element does blend in Chrome, but only if its background isn't propagated to the canvas.

To stop it doing that, add a background for the <html> element.

html {
  background-color: white;
}
body {
  background-image: linear-gradient(red, blue);
  background-size: 100%;
  background-repeat: no-repeat;
}
.blend {
  background: green;
  mix-blend-mode: difference;
}
<body>
  <div class="blend">BLEND ME</div>
</body>
like image 57
Alohci Avatar answered Sep 28 '22 00:09

Alohci