0
270
ViewsCSS Color de texto personalizado basado en el fondo
A continuación se muestra una captura de pantalla de mi situación actual. ¿Es posible hacer que el texto dentro de blob.svg sea blanco y el texto fuera de blob.svg del color de la mancha (#e60050)?
También hay un efecto de paralaje en este elemento en particular. La mancha se desplaza más lentamente que el texto. Por lo tanto, el texto no siempre se superpone al blob de la misma manera/posición. Según la posición de desplazamiento, el texto puede incluso estar completamente dentro o fuera del blob.
He estado jugando con varias implementaciones de mix-blend-mode ahora, pero parece que no puedo resolverlo.
Situación actual
<div id="sf-coming-up"> <div class="title">Binnenkort in ons theater</div> <img class="blob" src="/assets/blob_vector_1.svg" /> </div> .blob { position: absolute; top: 0; right: 20%; z-index: -1; } .title { padding-top: 50px; color: #FCFBFA; mix-blend-mode: difference; }
·
Santiago Trujillo
1 answers
Answer question0
Puede intentar usar colores invertidos y volver a invertir todo con un filtro CSS así:
body { margin: 0; } #sf-coming-up { filter: invert(1); height: 100vh; } .blob { position: absolute; top: 15%; right: 15%; z-index: -1; width: 70%; height: 70%; border-radius: 25% 75% 25% 50% / 75% 25% 50% 25%; background: springgreen; } .title { padding: 25vh 0 0 12.5vh; color: springgreen; mix-blend-mode: difference; } <div id="sf-coming-up"> <div class="title">Binnenkort in ons theater</div> <div class="blob"></div> </div>
·
Santiago Trujillo
Report
Answer question