I'm struggling with CSS mix blend mode. Here is what I'm trying to achieve, basically: There are a couple of sections with different background colors or background images. And there is a text with position: fixed. Depending on the background colors the Text is supposed to be displayed either white or black. Black for most of the sections and white for some dark/black sections. So is there any way to specify the value which CSS mix blend mode gives the selector? Or any other solution for that problem?
There are a couple of similar questions 'round here on SO. Though, none of theme were about a fixed element that's supposed to be either "black or white". Thus, none of the solutions turned out to work for me.
.fixed-text {mix-blend-mode: difference} seems to be working fine as long as long as all the sections' backgrounds are either black or white. Which is not the case.
I tried to combine mix-blend-mode with filter-properties which obviously is not possible. I tried mix-blend-mode for the sections instead of the fixed text and their pseudo classes and elements. Which doesn't work either. I tried to get the background's rgb-value with JS and change the fixed text color that way. I almost got it. Though, that way I couldn't get the text to have a "smooth transition" like it has with mix blend mode. The hole text changes the color at once which also is not what I'm trying to do. I also tried some weird things with some overlay containers and CSS backdrop-filters which was, well, just weird. And I tried to combine several blend-modes at once.
I've been looking for a proper solution for days and wasn't able to get it right. :(