1. Introducción al atributo mix-blend-mode 2. Valores de atributos comunes de mix-blend-mode 3. Aplicación del atributo mix-blend-mode 1. Efecto de aplicación 2. Código relacionado 4. Fondo de adaptación inteligente de texto 1 Estilo original 2. Agregar mezcla 3. Código de implementación.
El [ atributo mix-blend-mode ] en CSS describe cómo el contenido de un elemento debe combinarse con el contenido del elemento principal inmediato del elemento y el fondo del elemento ;
Se usa para establecer el modo de fusión entre el fondo y el primer plano de un elemento; se puede aplicar a cualquier elemento; se puede usar con el atributo de imagen de fondo para crear una variedad de efectos visuales diferentes;
| número de serie | valor del atributo | Modos de fusión e instrucciones. |
|---|---|---|
| 1 | modo de mezcla-mezcla: normal ; | Normal: esta propiedad no aplica ninguna combinación; |
| 2 | modo de mezcla-mezcla: multiplicar ; | Multiplicar: El elemento se multiplica por el fondo y reemplaza el color de fondo. El color resultante siempre es tan oscuro como el fondo; |
| 3 | modo de mezcla-mezcla: superposición ; | Superposición: multiplica o enmascara el contenido según el color de fondo, a diferencia del modo de fusión Luz intensa; |
| 4 | modo de mezcla-mezcla: pantalla ; | Pantalla: multiplica el fondo y el contenido, luego complementa el resultado. Esto dará como resultado que el contenido sea más claro que el color de fondo; |
| 5 | modo de mezcla-mezcla: oscurecer ; | Oscurecer ; cuando el contenido se oscurece, el fondo se reemplazará con el contenido; de lo contrario, permanecerá como está; |
| 6 | modo de mezcla-mezcla: aclarar ; | Aclarar: el fondo se reemplaza con contenido más claro; |
| 7 | modo de mezcla-mezcla: esquivar color ; | Aclarar color: esta propiedad aclara el color de fondo para reflejar el color del contenido; |
| 8 | modo de mezcla-mezcla: color-quemado ; | Aclaramiento de color: esto oscurece el fondo para reflejar el color natural del contenido; |
| 9 | modo de mezcla: luz dura ; | Luz dura: Dependiendo del color del contenido, esta propiedad lo filtrará o lo multiplicará; |
| 10 | modo de mezcla: luz suave ; | Luz Suave: Dependiendo del color del contenido, esto lo oscurecerá o aclarará; |
| 11 | modo de mezcla-mezcla: diferencia ; | Diferencia : Esto restará el más oscuro de los dos colores del color más claro; |
| 12 | modo de mezcla-mezcla: exclusión ; | Excluir : similar a Diferencia, pero con menor contraste; |
| 13 | modo de mezcla-mezcla: tono ; | Tono : Crea color combinando el tono del contenido con la saturación y el brillo del fondo; |
| 14 | modo de mezcla-mezcla: saturación ; | Saturación : Crea color a través de la saturación del contenido y el tono y brillo del fondo; |
| 15 | modo de mezcla-mezcla: color ; | Combinación de colores: cree colores basados en el tono y la saturación del contenido y el brillo del fondo; |
| 16 | modo de mezcla: luminosidad ; | Luminosidad : Crea colores basados en la luminosidad del contenido y el tono y saturación del fondo. Esto es lo opuesto a la propiedad del color; |
normal: este atributo no aplica ninguna combinación.multiplicar: el elemento se multiplica por el fondo y reemplaza el color de fondo. El color resultante siempre es tan oscuro como el fondo.pantalla: multiplica el fondo y el contenido luego complementa el resultado. da como resultado un contenido que es más brillante que el color de fondo.overlay: multiplica o filtra el contenido según el color de fondo. Este es el inverso del modo de fusión de luz intensa.oscurecimiento: el fondo se reemplaza con el contenido donde se encuentra el contenido. más oscuro, de lo contrario, se deja como estaba.lighten: el fondo se reemplaza con el contenido donde el contenido es más claro.color-dodge: este atributo ilumina el color de fondo para reflejar el color del contenido.color-burn: esto oscurece el fondo para reflejar el color natural del contenido.luz dura: dependiendo del color del contenido, este atributo lo filtrará o lo multiplicará.luz suave: dependiendo del color del contenido, lo oscurecerá o aclarará.diferencia: esto resta el color más oscuro de los dos colores del color más claro.exclusión: similar a la diferencia pero con menor contraste.hue: crea un color con el tono del contenido combinado con la saturación y luminosidad del fondo.saturación: crea un color con la saturación del contenido combinado con el tono y la luminosidad del fondo.color: crea un color con el tono y la saturación del contenido y la luminosidad del fondo.luminosidad: crea un color con la luminosidad del contenido y el tono y saturación del fondo. Este es el inverso del atributo de color.
Clic de visualización de efectos
Aplicación del atributo de modo de mezcla-mezcla
<!DOCTYPE html>
<html lang="es">
<cabeza>
<meta juego de caracteres="UTF-8">
<meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0">
<title>Aplicación del atributo modo mezcla-mezcla</title>
<estilo>
* {
margen: 0;
relleno: 0;
}
.contenedor {
/* Definir variables */
--modo-mezcla-mezcla: normal;
posición: relativa;
ancho: 300px;
altura: 400 px;
margen: 60px;
relleno: 20px;
sombra de cuadro: 0 0 6px 1px #999;
radio del borde: 6px;
color de intercalación: transparente;
}
h3,
h4 {
margen inferior: 10px;
}
.cuadro de información {
ancho: 100%;
altura: 24 píxeles;
altura de línea: 24px;
}
.círculo {
posición: absoluta;
ancho: 200px;
altura: 200 píxeles;
radio fronterizo: 50%;
modo de mezcla-mezcla: var(--modo-de-mezcla-mezcla);
}
.cuadro rojo {
izquierda: 70px;
arriba: 160px;
color de fondo: rojo;
}
.caja verde {
izquierda: 30px;
arriba: 220px;
color de fondo: verde claro;
}
.caja azul {
izquierda: 110px;
arriba: 220px;
color de fondo: azul;
}
</estilo>
</cabeza>
<cuerpo>
<div clase="contenedor">
<h3>Aplicación del atributo modo mezcla-mezcla</h3>
<h4 clase="caja-valor"></h4>
<div class="info-box"></div>
<div class="círculo cuadro rojo"></div>
<div class="círculo caja-verde"></div>
<div class="círculo caja-azul"></div>
</div>
</cuerpo>
<guión>
// Obtener elementos var contenedor = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//La lista de valores y descripción del atributo mix-blend-mode;
valores var = [
{
identificación: 1,
nombre: "normal",
valor: "normal",
info: "Esta propiedad no aplica ninguna combinación;"
},
{
identificación: 2,
nombre: "multiplicar",
valor: "multiplicar",
info: "El elemento se multiplica por el fondo y reemplaza el color de fondo. El color resultante siempre es tan oscuro como el fondo;"
},
{
identificación: 3,
nombre: "superposición",
valor: "superposición",
info: "Multiplicar o enmascarar contenido según el color de fondo; esto es lo opuesto al modo de fusión de luz intensa;"
},
{
identificación: 4,
nombre: "pantalla",
valor: "pantalla",
info: "Multiplique el fondo y el contenido y luego complemente el resultado. Esto dará como resultado que el contenido sea más claro que el color de fondo;"
},
{
identificación: 5,
nombre: "Oscuro",
valor: "oscurecer",
info: "Cuando el contenido se oscurece, el fondo se reemplazará con el contenido; de lo contrario, permanecerá como está;"
},
{
identificación: 6,
nombre: "iluminar",
valor: "aligerar",
info: "El fondo se reemplaza con contenido más claro;"
},
{
identificación: 7,
nombre: "El color se desvanece",
valor: "esquivar color",
info: "Esta propiedad aclara el color de fondo para reflejar el color del contenido;"
},
{
identificación: 8,
nombre: "El color se desvanece",
valor: "color quemado",
info: "Esto oscurece el fondo para reflejar el color natural del contenido;"
},
{
identificación: 9,
nombre: "luz dura",
valor: "luz dura",
info: "Esta propiedad filtrará o multiplicará el contenido según su color."
},
{
identificación: 10,
nombre: "luz suave",
valor: "luz suave",
info: "Dependiendo del color del contenido, esto lo oscurecerá o aclarará;"
},
{
identificación: 11,
nombre: "Diferencia",
valor: "diferencia",
info: "Esto restará el más oscuro de los dos colores del color más claro;"
}, {
identificación: 12,
nombre: "excluir",
valor: "exclusión",
info: "Similar a la diferencia, pero con menor contraste;"
},
{
identificación: 13,
nombre: "tono",
valor: "tono",
info: "Crea color combinando el tono del contenido con la saturación y el brillo del fondo;"
},
{
identificación: 14,
nombre: "saturación",
valor: "saturación",
info: "Crea color a partir de la saturación del contenido y el tono y brillo del fondo;"
},
{
identificación: 15,
nombre: "Mezcla de colores",
valor: "color",
info: "Crea colores basados en el tono y la saturación del contenido y el brillo del fondo;"
},
{
identificación: 16,
nombre: "brillo",
valor: "luminosidad",
info: "Crea un color basado en la luminosidad del contenido y el tono y saturación del fondo. Esto es lo opuesto a una propiedad de color;"
}
]
cambiarModo();
//Cambiar el modo de mezcla
función cambiarModo() {
sea índice = 0;
modAttr(índice);
let timerId = setInterval(() => {
if (índice >= valores.longitud) {
clearInterval(temporizadorId);
devolver;
}
índice++;
modAttr(índice)
}, 3000)
}
función modAttr(índice) {
//Establece el valor de la propiedad de mix-blend-mode container.style.setProperty('--mix-blend-mode', value[index].value);
valueBox.innerHTML = `modo-mezcla-mezcla: ${valores[índice].valor};`;
infoBox.innerHTML = `${valores[índice].nombre}(${valores[índice].valor}): ${valores[índice].info}`
}
</script>
</html>Muchas veces, es necesario mostrar el texto junto a la imagen. Si el color del texto y la imagen son similares, la legibilidad se verá seriamente afectada;
¿Cómo puedo hacer que el texto se adapte automáticamente al fondo?
Puede utilizar el atributo mix-blend-mode para establecer la mezcla de colores del texto y el fondo para lograr el efecto de que el texto se adapte al fondo;
El color del texto es blanco; la legibilidad es deficiente en algunas imágenes;
.grid-item > h3 {
color: rgb(255, 255, 255);
...
}
Establezca el atributo mix-blend-mode en diferencia ;
El valor inicial del color del texto es blanco, pero la diferencia se calculará con el valor de color de cada píxel correspondiente al fondo del elemento padre para obtener un nuevo valor de color;
Valor de color de texto - valor de color de fondo = valor de píxel mixto (cada píxel)
Por ejemplo: color de texto (255, 255, 255), color de fondo (255, 255, 255), valor calculado (0, 0, 0), mostrado en negro;
.grid-item>h3 {
color: rgb(255, 255, 255);
/* Establecer el modo de fusión - calcular la diferencia */
modo de mezcla-mezcla: diferencia;
...
}Nota: El modo de fusión de diferencia aquí se aplica al texto;
<!DOCTYPE html>
<html lang="es">
<cabeza>
<meta juego de caracteres="UTF-8">
<meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0">
<title>El texto se adapta inteligentemente al fondo</title>
<estilo>
* {
margen: 0;
relleno: 0;
}
.contenedor {
pantalla: flexible;
ancho: 100vw;
altura: 60vh;
justificar-contenido: centro;
alinear elementos: centro;
}
.grid-contenedor {
pantalla: cuadrícula;
columnas-plantilla-cuadrícula: 400px 400px 400px;
filas-plantilla-cuadrícula: 200px 200px;
espacio: 10px;
}
.elemento de cuadrícula {
repetición de fondo: no repetición;
tamaño de fondo: portada;
radio del borde: 6px;
sombra de cuadro: 0 0 6px 1px #999;
}
.grid-item>h3 {
color: rgb(255, 255, 255);
tamaño de fuente: 36px;
/* Establecer el modo de fusión - calcular la diferencia */
modo de mezcla-mezcla: diferencia;
}
.grid-item:nth-child(1) {
/* imagen de fondo: url("D:\test\zyl-img\bg_1.jpg");
color de fondo: rojo
}
.grid-item:nth-child(2) {
/* imagen de fondo: url("D:\test\zyl-img\bg_2.jpg" */
color de fondo: morado;
}
.grid-item:nth-child(3) {
/* imagen de fondo: url("D:\test\zyl-img\bg_3.jpg" */
color de fondo: amarillo;
}
.grid-item:nth-child(4) {
/* imagen de fondo: url("D:\test\zyl-img\bg_4.jpg" */
color de fondo: verde;
}
.grid-item:nth-child(5) {
/* imagen de fondo: url("D:\test\zyl-img\bg_5.jpg" */
color de fondo: verde azulado;
}
.grid-item:nth-child(6) {
/* imagen de fondo: url("D:\test\zyl-img\bg_6.jpg" */
color de fondo: azul;
}
</estilo>
</cabeza>
<cuerpo>
<div clase="contenedor">
<div class="contenedor-grid">
<div class="elemento-cuadrícula">
<h3>Aplicación del atributo modo mezcla-mezcla</h3>
</div>
<div class="elemento-cuadrícula">
<h3>Aplicación del atributo modo mezcla-mezcla</h3>
</div>
<div class="elemento-cuadrícula">
<h3>Aplicación del atributo modo mezcla-mezcla</h3>
</div>
<div class="elemento-cuadrícula">
<h3>Aplicación del atributo modo mezcla-mezcla</h3>
</div>
<div class="elemento-cuadrícula">
<h3>Aplicación del atributo modo mezcla-mezcla</h3>
</div>
<div class="elemento-cuadrícula">
<h3>Aplicación del atributo modo mezcla-mezcla</h3>
</div>
</div>
</div>
</cuerpo>
</html>Con esto concluye este artículo sobre la explicación detallada del atributo mix-blend-mode en CSS (configuración del modo de mezcla de un elemento). Para obtener más información sobre el atributo css mix-blend-mode, busque artículos anteriores en downcodes.com o. Continúe explorando los artículos relevantes a continuación y espero que apoye downcodes.com en el futuro.