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

When setting `mix-blend-mode` (such as `difference`) for fixed positioned text, if the text disappears, it is usually because its parent container or itself lacks an opaque background - the CSS blend mode needs to be calculated with the non-transparent pixels in the stacking context below, and the transparent background will cause the blend result to be invisible.

mix-blend-mode is not a simple "text coloring" attribute, but a layer blending operation : the browser performs a pixel-by-pixel mathematical operation on the pixel value of the current element and the visible content below it (lower on the z-axis) (for example, difference is calculated as |A − B|). Therefore, if the background of the .header element itself is transparent (the default value), and there is no background layer with sufficient contrast below it to participate in the blending, the result may be close to pure black, pure white, or completely invisible.

✅ Correct approach: Make sure to mix with a "reference material"

The key principle is that the element to which mix-blend-mode is applied must be in a blending context with a clear, non-transparent background . There are two common effective solutions:

Solution 1: Set an opaque background for the blend element itself (recommended)

 .header {
  position: fixed;
  top: 10vh;
  width: 100%;
  z-index: 10;
  mix-blend-mode: difference;
  /* An opaque background must be added as the "base" for blending */
  background-color: rgba(255, 255, 255, 0.01); /* Very low transparency white background, visually insensitive but providing mixed anchor points*/
  /* Or use solid color (such as cadetblue), suitable for designing scenes that need to emphasize contrast*/
}

? Tip: rgba(255,255,255,0.01) is a neat trick - it's barely visible, but just enough to trigger the blending calculation without obscuring the content underneath.

Option 2: Wrap the mixin group and set the isolation context

 .blending-group {
  isolation: isolate; /* Create an independent mixed context to prevent accidental impact on the outer layer*/
}

.header {
  mix-blend-mode: difference;
  /* At this time, the .header can maintain a transparent background, but it must ensure that there is a clear background layer below its parent .blending-group*/
}

Use HTML structure to ensure clear hierarchy:

 <div class="blending-group">
  <!-- The background container must be below the .header (the DOM order determines the drawing order) -->
  <div class="fp-container-1" style="background: white;"></div>
  <div class="fp-container-2" style="background: #0066cc;"></div>
  <!-- .header must be written after the background container before it can be mixed with it-->
  <h1 class="header">Header</h1>
</div>

⚠️ Notes

• mix-blend-mode does not support direct mixing of position: fixed elements with or document backgrounds (because the fixed element is out of the ordinary document flow, its "below" may be blank);
• Avoid setting mix-blend-mode directly on body or html, which may easily cause full-page rendering exceptions;
• Performance sensitive: For frequently changing mixed areas, it is recommended to use will-change: mix-blend-mode for optimization, but use it with caution;
• Compatibility: All modern browsers support it, but IE does not support it at all and needs to provide normal fallback style.

✅ Minimal usable example

 <style>
  * { margin: 0; }
  .blending-group { isolation: isolate; }
  .header {
    position: fixed;
    top: 10vh;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 3rem;
    mix-blend-mode: difference;
    color: white; /* Make sure the text has an initial color*/
  }
  .fp-container-1 { height: 100vh; background: white; }
  .fp-container-2 { height: 100vh; background: #2a5b8c; }
</style>

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

By clarifying the mixing context and reference background, mix-blend-mode can stably achieve creative effects such as dynamic reverse colors and high-contrast floating titles, instead of disappearing mysteriously.

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