La propiedad mix-blend-mode de CSS de un elemento se usa para especificar la combinación del fondo de un elemento con el padre del elemento.
Sintaxis:
mix-blend-mode: normal | multiply | exclusion
| overlay | lighten | darken
| color-dodge | color-burn
| hard-light | soft-light
| difference | hue
| saturation | color | screen
| luminosity
Valores:
- inicial : la configuración predeterminada, esto no establece un modo de fusión.
- heredar : hereda el modo de fusión de su elemento principal.
- unset : esto elimina el modo de fusión actual del elemento.
- normal : no se aplica mezcla en el elemento.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>normal</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: normal"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- multiplicar : esto multiplica el color del elemento con el fondo. El color resultante es siempre tan oscuro como el fondo.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>multiply</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: multiply"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- pantalla : esto multiplica el color del elemento con el fondo y luego complementa el resultado. El color resultante es siempre tan brillante como una de las capas mezcladas.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>screen</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: screen"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- exclusión : esto resta el más oscuro de dos colores del color más claro del elemento. El resultado es similar a ‘diferencia’ pero con un contraste menor.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>exclusion</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: exclusion"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- superposición : esto aplica ‘multiplicar’ en colores más claros y ‘pantalla’ en colores más oscuros en el elemento. El efecto es efectivamente lo contrario de ‘luz dura’.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>overlay</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: overlay"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- aclarar : esto reemplaza el fondo con el color del elemento donde el elemento es más claro.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>lighten</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: lighten"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- oscurecer : esto reemplaza el fondo con el color del elemento donde el elemento es más oscuro.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>darken</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: darken"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- color-dodge : esto aclara el color de fondo para reflejar el color del elemento.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>color-dodge</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: color-dodge"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
- Producción:
- color-burn : esto oscurece el color de fondo para reflejar los colores naturales de la imagen. El resultado ha aumentado la cantidad de contraste entre el elemento y el fondo.
html
<!DOCTYPE html> <html> <body> <h1 style='color: green'>GeeksForGeeks</h1> <div style="background-color: orange; width: 225px; padding: 10px;"> <h3>mix-blend-mode set to: </h3> <h1>color-burn</h1> <!-- mix-blend-mode Property --> <div style="mix-blend-mode: color-burn"> <img src="https:/<li><b>Normal:</b> <strong>Syntax:</strong> <pre>mix-blend-mode: normal</pre>
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA