javascript - texto - como poner una imagen de fondo en html

¿Es posible cambiar el color del texto basado en el color de fondo usando css?

Question

¿Es posible cambiar el color del texto basado en el color de fondo usando css?

Como en esta imagen.

A medida que el texto se cruza desde un div (espacio en blanco: nowrap), ¿es posible cambiar el color del texto usando css o jquery / javascript?

Gracias

Answer 1

Aquí está mi solución (pensándola de una manera diferente):

Utilice un DIV con overflow: hidden; para la ''barra'' de la marina que muestra la escala de calificación. Luego escribes dos juegos de texto:

1. Dentro de la barra DIV (desbordamiento: oculto;), sería blanco (en la parte superior)
2. En el contenedor DIV subyacente, sería negro. (envase)

El resultado sería una superposición de los dos divs de texto de color:

 ________________________________
| 1 | 2 |
|_(dark blue w white)_|__________|

Aquí está mi jsFiddle

Funciona muy bien porque "cortará" las letras si la barra está en ese ancho. Échale un vistazo, creo que es lo que estás buscando.

Answer 2

De hecho, necesitas usar javascript. Abordaría el problema haciendo algo como esto:

1. Calcular el ancho de la superposición en píxeles. es decir, width = ${"#container"}.width() - ${"#progressbar"}.width();

2. Calcule la cantidad de texto que tiene que resaltar, puede usar siga esta discusión . Comenzaría con una cadena vacía, verificaría su ancho y si es más bajo que el ancho calculado anteriormente, agregaré un carácter y repetiré. Una vez que sea más alto elige esa cadena

3. Inserte la cadena anterior entre intervalos, como este ${"#container"}.html("<span class=''highlight''>"+highlitedText+"</span>"+restOfTheText); Obviamente, highlitedText es una cadena que contiene los caracteres en 2. y restOfTheText es una cadena con el resto de los caracteres.

Lo bueno de este método es que puede volver a ejecutarlo si cambia el ancho de su barra de progreso div.

¡Espero que ayude!

Answer 3

No, no puedes hacerlo solo con CSS. Necesitas JavaScript para esto.

Con jQuery / JavaScript puede verificar si un elemento tiene una regla CSS aplicada, y luego hacer lo que quiera, es decir

if ( $(''#element'').css(''white-space'') == ''nowrap'' ) {
// do something
} else {
// do something else
}

Lea también aquí: Jquery: Cómo verificar si el elemento tiene cierta clase / estilo css

Answer 4

Sí, eso es posible.

Puede unir un fondo y un color de primer plano en una clase y usar eso en su texto. Así que tienes, por ejemplo, una clase de estilo con fondo blanco de texto negro y otra con texto blanco y fondo negro. Puede cambiar esa clase entonces y el texto cambiará con el color de fondo.

Y puede usar jQuery(''body'').css(''color'', ''#fff'') por ejemplo, para cambiar el color del texto del cuerpo a blanco.

Si proporciona algún código de muestra, incluso sería posible crear una respuesta más específica para su pregunta.

Answer 5

Si bien la solución aceptada es probablemente la más fácil para este caso exacto, he escrito un complemento jQuery más completo que hace exactamente lo que necesita (y un poco más).

Repo: https://github.com/salsita/jq-clipthru
Blog: https://blog.javascripting.com/2014/06/11/changing-text-color-based-on-background-color/

En resumen, crea dinámicamente clones de un elemento con diferentes clases de CSS y recorta su contenido visible utilizando un clip CSS sin formato para que coincida con la superposición. Si lo usa, tenga en cuenta que el clip CSS solo funciona en la position: absolute o position: fixed elementos position: fixed , por lo que tendrá que colocar el texto de esa manera (lo que no debería ser un problema en su caso como lo veo) .