Почему CSS Mix Blend-Mode: Разница не работает со сплайновым 3D-элементом ⇐ CSS

[Anonymous]

Я пытаюсь реализовать режим смешанного смеси: различий на текстовом тексте заголовка, который должен сочетаться с 3D-сплайном, но он не работает. Навигационная панель имеет тот же режим смеси и работает отлично, но текст заголовка не показывает никакой инверсии цвета. Правильно

[*] Текст заголовка имеет режим смешивания: разница, но не показывает эффекта

[*] Оба позиционируются вне основного контента, чтобы избежать проблем с стеклянностью
















Anubhab
...




I am a Developer specializing in...


...

< /code>

Здесь блок кода CSS: < /p>

#spline-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
pointer-events: none;
}

#navigationbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
mix-blend-mode: difference; /* This works */
}

#header {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}

#header h1 {
color: rgba(255, 255, 255, 0.75);
mix-blend-mode: difference; /* This doesn't work */
z-index: -1;
}
< /code>
Полный код здесь:

html, css, js < /p>

Подвинул заголовок. /> Удаленное выделение: свойства изолята < /p>
< /li>
Добавлено аппаратное ускорение (Chill-Change: Transform: Transform: transtatez (0)) < /p>
< /li>
Пробое к различным модам смеси (исключение, Mulecty) < /p>>
/> < /ol>
Текст заголовка должен инвертировать цвета (белый к черному) при перекрытии с темными частями трехмерного фона, аналогично тому, как работает навигационный панель. 11 < /p>
Почему режим смешанного смеси: разница, работающая для навигационной панели, но не для текста заголовка, несмотря на то, что имеет аналогичное позиционирование и свойства CSS? Есть ли что -то конкретное в сплайновых 3D -элементах, которое предотвращает правильную работу режимов смешивания?


Подробнее здесь: https://stackoverflow.com/questions/797 ... nd-element