
Una propiedad background-attachment
en CSS que describe cómo las imágenes de fondo deben combinarse y con el color de fondo especificado para el elemento.
Debe definir los patrones de mezcla (modos de fusión) en el mismo orden de recepción de imágenes en la propiedad background-image
. Si la lista de valores para ambas propiedades no tiene la misma longitud, algunos valores se iterarán o eliminarán hasta que sean iguales.
Tenga en cuenta que si usamos la propiedad background
abreviada, restablecerá el valor de la propiedad background-blend-mode
a su valor predeterminado, así que asegúrese de usar esta propiedad después.
Funciones background blend mode en css
Valor inicial | normal |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | No |
Valor calculado | Como el valor especificado. |
/* valor único */ background-blend-mode: normal; /* dos valores, cada uno siguiendo una imagen de fondo diferente */ background-blend-mode: darken, luminosity; /* valores globales */ background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: unset;
Ejemplos y aplicaciones
Este es un ejemplo interactivo que le permite elegir cualquiera de los modos de fusión y el resultado aparecerá de inmediato.
Código HTML:
<div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select>
Asegúrese de proporcionar dos imágenes con el nombre image-1.png
y image-2.png
para que el ejemplo funcione.
Código CSS:
#div { width: 300px; height: 300px; background: url('image-1.png'), url('image-2.png'); background-blend-mode: screen; }
El código JavaScript responsable de modificar el patrón de fusión al seleccionar el valor de un elemento <select>
:
document.getElementById("select").onchange = function(event) { document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; }
Soporte de navegadores
Característica | Cromo | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte principal | 35 | 30,0 | No soportado | 22 | 7.1 |
Estructura general
<blend-mode>
Modo de mezcla <blend-mode>
que especifica qué modo de fusión usar.
Estructura formal
background-blend-mode: <blend-mode>#;
Los valores se pueden repetir para aplicarlos a más de una coma separándolos con una coma (,
).
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Vea también
- Propiedades de página tomadas por la propiedad de acceso directo
background
: elbackground-clip
,background-color
,background-image
,background-origin
,background-position
,background-repeat
,background-size
ybackground-attachment
. - La página del elemento
<img>
que se utiliza para agregar imágenes al documento. - Para agregar un color en lugar de una imagen, use el
background-color
. - Consulte la página de Patrones de fusión
<blend-mode>
para obtener más detalles.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS