Blend

<< Filtros Formas básicas >>

Ambas propiedades, mix-blend-mode y background-blend-mode, te permiten usar modos de fusión (como los que encontrarías en Photoshop: "Multiply", "Screen", "Overlay", etc.) para mezclar colores por ejemplo.

La diferencia clave entre ellas es qué están mezclando:

mix-blend-mode: Mezcla un elemento completo con los elementos que están detrás de él.
background-blend-mode: Mezcla las diferentes capas de fondo (imágenes, degradados, colores) dentro de un mismo elemento.

mix-blend-mode

Esta propiedad define cómo el contenido de un elemento entero (su texto, su fondo, sus bordes, todo) se mezcla con el contenido de los elementos que están debajo de él en la página.

Piensa como si tuvieras dos capas en Photoshop/Gimp: el elemento (div, p, h1) es la capa superior, y todo lo que está detrás es la capa inferior.

Los valores más habituales que puede tomar son:

normal: (Default) Sin mezcla.
multiply: Multiplica los colores. Ideal para oscurecer y superponer texturas.
screen: Aclara la imagen. Es el opuesto a multiply.
overlay: Una mezcla de multiply y screen. Aumenta el contraste.
difference: Resta el color más claro del más oscuro. Es famoso por crear efectos de "inversión" de color.
luminosity: Usa la luminosidad del elemento superior y el color del inferior.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo mix-blend-mode</title>
    <link rel="stylesheet" href="1.mix-blend-mode.css">
</head>

<body>
    <h1><code>mix-blend-mode</code> sin 'position'</h1>
    <p>Usando un margen negativo</p>

    <main>
        <img class="imagen-fondo" src="https://picsum.photos/id/1015/500/350" alt="Paisaje de montaña">
        <div class="texto-superpuesto">
            <h2>Efecto 'Difference'</h2>
            <p>Este bloque tiene un fondo blanco y texto negro. Al usar <strong>difference</strong>, el blanco invierte
                los colores de la imagen, y el texto negro los vuelve a invertir.</p>
        </div>
    </main>
</body>

</html>

background-blend-mode

Esta propiedad define cómo se mezclan las múltiples capas de fondo dentro de un solo elemento.

Solo funciona si tienes al menos dos fondos (por ejemplo, dos background-image, o un background-image y un background-color). No afecta a ningún otro elemento de la página.

Valores comunes: Usa los mismos valores que mix-blend-mode (multiply, screen, overlay, etc.).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background-blend-mode</title>
    <link rel="stylesheet" href="2.background-blend-mode.css">
</head>

<body>
    <div class="caja-tintada">
        <h2>Imagen Tintada</h2>
    </div>
</body>

</html>

mix vs background

mix-blend-mode: Un elemento con los elementos que hay detrás. La mezcla se produce entre capas diferentes
background-blend-mode: Un fondo con otro fondo (del mismo elemento). Mezcla entre estilos de capa.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=c, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="3.background-blend-mode.css">
</head>

<body>
    <h1>Ejemplo background-blend-mode</h1>
    <main>
        <div id="blend-box">
        </div>
    </main>
    <footer>
        <p>La propiedad clave está en CSS: <code>background-blend-mode: overlay;</code></p>
        <footer>
</body>

</html>

<< Filtros Formas básicas >>