How to make mix-blend-mode take effect normally in fixed positioning text

`mix-blend-mode` often fails because the background of the element is transparent, resulting in no reference for the blending calculation. It is necessary to explicitly set the non-transparent background color to correctly present the differential blending effect.

When using mix-blend-mode (such as difference, exclusion, or overlay) to achieve dynamic text visibility, a common but easily overlooked key point is that the element to which the blend mode is applied must itself have a clear, non-transparent background (background-color or background) . Otherwise, its default transparent background will prevent the browser from performing effective pixel-level blending operations - especially if the parent container or cascading context lacks sufficient color information, the text may "disappear" completely.

Why does the text disappear?

CSS mix-blend-mode works by taking each pixel of the current element and doing a mathematical operation with everything in the stacking context below it (e.g. difference is calculated as |A − B|). But if the .header element itself has a transparent background, and there is no opaque layer underneath it that can participate in the mixing (for example, it is not wrapped in a container with a background, or the z-index hierarchy is confusing), then it is actually mixed with an "empty" or "transparent canvas", and the result is often close to all black/all white/invisible, especially on light or solid backgrounds.

Do it right: Provide a reliable hybrid reference

✅The background color must be explicitly declared for elements applying mix-blend-mode (even if it is just a very light/dark semi-transparent color):

 .header {
  position: fixed;
  top: 10vh;
  left: 0;
  width: 100%;
  z-index: 100;
  mix-blend-mode: difference;
  background-color: rgba(0, 0, 0, 0.01); /* Key: non-transparent background, extremely low transparency to avoid occlusion*/
  padding: 0.5rem 1rem;
}

⚠️ Notes:

• Don't rely on the parent container background "coming through" as the source of blending - mix-blend-mode only works on the intersection of the element's own content and its underlying stacking context , not the parent element's background;
• Ensure that .header is in the same stacking context as other content (such as .fp-container-*), or explicitly create an isolation context via isolation: isolate to avoid accidental mixing interference;
• If you need text to always be visible with high contrast (such as dark/light background adaptation), difference is a reasonable choice, but it must be matched with a reliable background color and a reasonable font color (for example, white text will lighten on dark backgrounds and darken on light backgrounds in difference).

Full runnable example

 <div class="blending-group">
  <h1 class="header">Header</h1>
  <div class="fp-container-1"></div>
  <div class="fp-container-2"></div>
</div>

 * { margin: 0; }
body { font-family: 'Roboto', sans-serif; }

/* Key: header must have a background*/
.header {
  position: fixed;
  top: 10vh;
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  mix-blend-mode: difference;
  background-color: rgba(0, 0, 0, 0.001); /* cannot be omitted! */
  z-index: 100;
}

.fp-container-1 {
  height: 100vh;
  background-color: white;
}

.fp-container-2 {
  height: 100vh;
  background-color: #2a56c6;
}

✅ Summary: mix-blend-mode is not a magic property that "automatically adapts to the background", but a calculation tool that strictly relies on visual stacking levels and pixel values. Adding a line of background-color (even almost transparent) can solve 90% of the "text disappearing" problem. During development, it is recommended to use DevTools to check whether the computed background of the element is transparent and correct it in time.

The above is the detailed content of How to make mix-blend-mode take effect normally in fixed positioning text. For more information, please follow other related articles on the PHP Chinese website!