0

As my site http://newwebsite.outfit24.com.au (still being built) is heavily image-based, I want the header text colour to change so that it stands out from the background (both dark and light images). I have used Elementor for the bulk building of my site and I’m using the "Custom CSS and JS" plugin to write my CSS and change the header colour. In elementor, I set the header CSS class to “custom-header”.

I have tried using “mixed-blend-mode: difference;” but mixed-blend-mode is highlighted red and doesn’t seem to be working. Here is a screenshot of mix-blend-mode not working: https://ibb.co/MNbf84z

.custom-header a{
    color:#fff!important; 
}
.custom-header {
    mix-blend-mode:difference!important; 
}

I expect for the CSS to work, changing the colour of the header allowing it to be visible whether it's in front of #fff, #000, and any image on the site but for some reason, mix-blend-mode is highlighted red and isn't working. Does anyone know why this is happening?

Thanks for your help:)

JaxAshwood
  • 1
  • 1

2 Answers2

0

Blend mode does not work when you have any z-index value for the section or its parent section.

N Hossain
  • 13
  • 1
  • 4
0

For anyone who might still need that. I tried using mix-blend-mode in wordpress for a while, being hit by that "unknown property mix-blend-mode" error. As far as I noticed, the css editors provided by wordpress have that error, but if I make my own html section (as many themes support, I guess all of them) and make a <style>.blahblah {mix-blend-mode: difference;}</style>, that makes it work. Worth trying.

Conclusion: Don't use wordpress css editors. Use an html section and write styles in it.

ouflak
  • 2,458
  • 10
  • 44
  • 49
Marcu Rares
  • 1
  • 1