Cómo mostrar texto en la imagen con el modo de mezcla y mezcla CSS3
Fondos de imagen luce genial detrás de textos de gran pantalla. Sin embargo, su implementación CSS no es tan sencilla. Podemos usar el clip de fondo: texto; propiedad, sin embargo, sigue siendo una característica experimental sin suficiente soporte de navegador.
La alternativa CSS para mostrar un fondo de imagen detrás de un texto es utilizando la modo mezcla-mezcla propiedad. Modos de mezcla para elementos HTML son bastante compatibles con todos los navegadores de escritorio y móviles modernos, con excepción de algunos, como Internet Explorer.
En este post, vamos a ver cómo modo mezcla-mezcla (dos de sus modos específicamente) funciona, y cómo puede usarlo para Mostrar un texto con fondo de imagen. en dos casos de uso:
- cuando la imagen de fondo puede ser visto a través del texto
- cuando la imagen de fondo corre alrededor el texto
Vea algunos ejemplos en la demostración a continuación (las imágenes son de unsplash.com).
los modo mezcla-mezcla La propiedad CSS define cómo contenido y el fondo de un elemento HTML debería mezclar colorwise.
Eche un vistazo a la lista de modos de fusión, de los cuales usaremos multiplicar y pantalla en este post.
Primero, veamos cómo funcionan estos dos modos de mezcla específicos.
Cómo multiplicar Y pantalla los modos de mezcla funcionan
Los modos de fusión técnicamente son funciones que calcular un valor de color final Usando los componentes de color de un elemento y su fondo..
los multiplicar modo de mezcla
En el multiplicar El modo de mezcla, los colores individuales de los elementos y sus fondos son multiplicado, y el color resultante se aplica a la versión combinada final.
los multiplicar El modo de mezcla se calcula de acuerdo con la siguiente fórmula:
B (Cb, Cs) = Cb × Cs
dónde:Cb - Componente de color del telón de fondo.Cs - Componente de color del elemento fuente.segundo - Función de fusión
Cuando Cb y Cs se multiplican, el color resultante es una mezcla de estos dos componentes de color, y es tan oscuro como el más oscuro de los dos colores.
Para crear el fondo de la imagen de texto, necesitamos enfocarnos en el caso cuando Cs (el componente de color del elemento fuente) es ya sea blanco o negro.
Si Cs es negro su valor es 0, El color de salida también será negro, porque Cb × 0 = 0. Entonces, cuando el elemento es de color negro, No importa de qué color sea el telón de fondo., todo lo que podemos ver después de la mezcla es negro.
Si Cs es blanco su valor es 1, el color de salida es lo que sea Cb es porqueCb × 1 = Cb. Así que en este caso vemos el telón de fondo directamente. como están las cosas.
los pantalla modo de mezcla
los pantalla el modo de mezcla funciona de manera similar a la multiplicar modo de mezcla, pero con el resultado opuesto. Entonces, un primer plano negro muestra el telón de fondo como están las cosas, y un primer plano blanco muestra blanco con cualquier telón de fondo.
Veamos rápidamente su fórmula:
B (Cb, Cs) = Cb + Cs - (Cb × Cs)
Cuando Cs es negro (0), el color de fondo se mostrará después de la fusión, como:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
Cuando Cs es blanco (1) El resultado será blanco con cualquier fondo, como:
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. Imagen mostrada a través de texto.
Para mostrar el texto que se muestra a través de su imagen de fondo, usamos el pantalla modo de mezcla con texto negro y espacio circundante blanco.
Agua
.fondo ancho: 600px; altura: 210px; imagen de fondo: url (someimage.jpg); tamaño de fondo: 100%; margen: auto; .text color: negro; color de fondo: blanco; mezcla-modo-mezcla: pantalla; ancho: 100%; altura: 100%; tamaño de letra: 160 pts; peso de la fuente: más audaz; text-align: center; línea de altura: 210px; margen: 0;
Actualmente nuestro texto se ve a continuación, en el siguiente paso agregaremos un color personalizado al fondo..
Añadiendo color
Como ya habrá adivinado, el uso de los modos de mezcla nos deja solo dos opciones de color para el área que rodea el texto - negro o blanco. sin embargo con blanco, Es posible agregarle algo de color. usando una superposición, si el color de superposición combina muy bien con la imagen utilizada.
Para agregar color al área circundante, agregue un Agua Con esta técnica, podríamos colorear el área circundante alrededor del texto con el fondo de la imagen: Tenga en cuenta que la técnica funciona bien sólo con sutiles colores transparentes. Si usa un color totalmente opaco, o un color que no coincide con la imagen, la imagen que aparece dentro del texto tendrá un tinte muy visible del color utilizado, así que a menos que se trate de un aspecto que está buscando, evitar colores opacos. Aunque una colocación de texto normal sobre un fondo de imagen requiere la misma técnica, Les voy a mostrar un ejemplo de cómo se ve la demostración anterior cuando el el efecto se invierte, es decir, cuando el color del texto es blanco y el fondo es negro. Puedes usar el misma superposición para agregar algo de color al texto, a menos que desee mantenerlo en blanco. Y a continuación puedes ver cómo se ve el caso inverso: Tenga en cuenta que en Internet Explorer, o cualquier otro navegador que no sea compatible con mezcla-mezcla-modo: multiplicar propiedad de la superposición, ya que ayuda al color de fondo de la superposición a mezclar un poco mejor con la imagen dentro del texto.
.superposición color de fondo: rgba (0,255,255, .1); mezcla-modo-mezcla: multiplica; ancho: 100%; altura: 100%; posición: absoluta; arriba: 0;
2. Texto rodeado de fondo de imagen.
.texto color: blanco; color de fondo: negro; mezcla-modo-mezcla: pantalla; ancho: 100%; altura: 100%; tamaño de letra: 160 pts; peso de la fuente: más audaz; text-align: center; línea de altura: 210px; margen: 0;
.superposición color de fondo: rgba (0,255,255, .1); mezcla-modo-mezcla: multiplica; ancho: 100%; altura: 100%; posición: absoluta; arriba: 0;
modo mezcla-mezcla propiedad, el fondo de la imagen no aparecerá y el texto permanecerá en negro (o blanco).
