Tengo un sitio web donde hay imágenes moviéndose en el fondo y me gustaría que la fuente de navegación cambie según el color de la imagen.
Para entender lo que quiero decir, solo mire el '+' en este sitio web de navegación https://www.atomomanagement.com/
Según la imagen, es blanco o negro. Me gustaría hacer lo mismo pero no tuve suerte. Intenté usar mix-blend-mode: difference pero no funciona
¿Alguien puede ayudar?
Atentamente
Sentí que debería publicar una respuesta para explicar qué está pasando con el ejemplo de OP.
Simplemente configurando un fill: white en un SVG no reproduce completamente el resultado deseado. El ejemplo de OP también requiere un div principal con mix-blend-mode: difference también.
De hecho, puede reproducir esto sin ningún SVG. Simplemente necesita un elemento con un color/relleno de blanco y un elemento principal con mix-blend-mode: difference . Esto tiene que ver con cómo funciona el modo de fusión de la diferencia con el color blanco sobre un fondo.
function _Swap() { document.querySelector(".backgroundDiv").style.background = (document.querySelector(".backgroundDiv").style.background == "rgb(0, 0, 0)") ? "rgb(255, 255, 255)" : "rgb(0, 0, 0)"; } .backgroundDiv { background: #FFF; padding: 4em; } .test { mix-blend-mode: difference; } p { color: #FFF; } <div class="backgroundDiv"> <div class="test"> <p>This is a test</p> </div> </div> <input type="button" value="Swap Background Color" onclick="_Swap()">No está cambiando. el elemento de path en svg tiene este atributo css :
fill: white; Está causando lo que ves. puede abrirlo en devTools y eliminar ese atributo y luego puede ver el cambio. para lograr lo que desea, haga un svg y agregue fill: white; al elemento de ruta.
Acabo de descubrir esta propiedad css que se le dio a la etiqueta de nav :
mix-blend-mode: difference;Revertirá todo el color del elemento en la etiqueta según el bg.
La respuesta de essxtee fue antes de mi actualización. Así que el crédito es suyo :)