Soy nuevo en css/html y estoy tratando de crear una página que use un fondo aleatorio. Tengo esa parte funcionando hasta ahora, pero necesito una forma de cambiar el color del texto según el color del fondo. Parece que la etiqueta CSS mix-blend-mode es lo que estoy buscando, pero parece que el modo no tiene ningún efecto o hace que el texto desaparezca por completo. Sospecho que tiene algo que ver con el apilamiento, pero no sé lo suficiente como para decirlo con seguridad.
Aquí está el código relevante:
Método de JavaScript para obtener/establecer fondo
function setBackground() { const URL = 'https://source.unsplash.com/random/' + screen.width + 'x' + screen.height; document.body.style["background-image"] = "url(\'" + URL + "\')"; document.body.style["background-repeat"] = "no-repeat";Extracto HTML
<body onload="setBackground()";> <div class="navbar-global" id="main-navbar"> <h1 style="text-align: center;"> Apion's Page </h1> </div> También he intentado poner CSS en mix-blend-mode en línea en la etiqueta h1 , pero eso no tiene ningún efecto. Cambiar el modo no hace ninguna diferencia.
CSS
.navbar-global { width: 300px; margin: auto; mix-blend-mode: difference; } Y aquí está el archivo HTML completo. ¿Cómo puedo hacer que el modo mix-blend-mode actúe como debería?