Auto transparent text related on parent backgroud color

Question

Hi. thanks for the amazing templates first of all.
By the way, I had to try to change the header main slider texts color to dark or light automatically depending on its background color.
Is that possible or not? because I had to control it on the back-end and this option cause me to add more controlling futures and database tables and make more configuration options on the back-end dashboard pannel for editors, and slow down a bit more for calc this transparent possibility as you know. If you are could help me with this issue I really appreciate that.
Thanks for anythings. also sorry for my bad English though.

SemiColonWeb · Accepted Answer

Hello,

Thank You so much for the Kind Words! :)

Unfortunately, this is currently not supported out of the box, but you can simply add the .dark Class to the .swiper-slide DIV which has the Dark Background and the Text will be changed to White.

Additionally, you can consider adding the following CSS Property to the Texts inside the Slider. Example:
[ch_pre type="css"].mixed-text {
mix-blend-mode: difference;
}[/ch_pre]

And then add the .mixed-text Class to the Text Wrapper. This will change the Text's contrast ratio according to the Slide Background.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.