Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=6b35cc7a-f032-49bd-a200-d738fe75ecfc

Cómo convertir imágenes de fondo en monotono con CSS

Ejemplo del resultado de convertir una imagen en monocromo con CSS

En CSS tenemos la posibilidad de usar filtros para alterar imágenes insertadas en el código html sin necesidad de pasar antes por Photoshop u otro editor de fotos.

¿Pero qué pasa con las imágenes de fondo? A las imágenes de fondo no le podemos aplicar filtros directamente, pero tenemos varias alternativas a nuestra disposición.

A ver, se les puede aplicar la propiedad backdrop-filter pero tiene un soporte regulinchis. Por suerte sí que podemos usar background-blend-mode para llegar a un resultado parecido

En este post veremos cómo modificar una imagen de fondo para convertirla en una imagen monotono. ¿Por qué querríamos hacer esto? Pues, por ejemplo, para darle más presencia a un color corporativo en nuestra página.

Partiremos de esto:

Pantallazo de la web de ejemplo con la imagen de fondo a todo color. Imagen de Qingbao Meng en Unsplash CC0

Para llegar a algo parecido a esto:

Pantallazo del ejemplo con la imagen de fondo en monotono azul

Colocamos la imagen de fondo ocupando el 100% de la pantalla

En este caso vamos a colocar la imagen de fondo del body ocupando la pantalla completa y asegurándonos de que sea responsive.

No es el objetivo principal de post, pero no está de más explicar cómo hacer esto.

El html con el que vamos a trabajar es muy sencillo:

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejemplos imágenes de fondo monotono - campusMVP.es</title>
    </head>
    <body>
        <main>
            <a href="https://www.campusmvp.es/"><img src="assets/logo-campusmvp.png" alt="Logo de campusMVP.es"/>campusMVP.es</a>
        </main>
    </body>
    </html>

Como elementos html solo usaremos el body, un elemento main y (dentro de este) un enlace a campusMVP con el logo y la url a modo de contenido.

Colocaremos nuestra imagen de fondo del body, centrada y fija. El principal CSS para definir el background-image sería este:

    body {
            background-image: url(assets/foto.jpg);
            background-position:center;
            background-repeat:no-repeat;
            background-size:cover;
            background-attachment: fixed;
        }

La clave está en background-size:cover; y background-attachment: fixed;. Ojo, hay más CSS involucrado que quizá te interese y que podrás consultar en el código del ejemplo que te dejo al final del post, pero estas reglas son las más importantes.

Así que ya tenemos nuestra página inicial:

Imagen inicial de los ejemplos

Ahora lo que queremos es convertir la foto en una imagen monocromática del mismo color (o un tono parecido) que el fondo del logo. Vamos a ver tres formas distintas de hacerlo:

1 - Con un filtro de escala de grises y un color de fondo

¿Pero no decías que no se podían usar filtros? A la imagen de fondo no, pero a su elemento contenedor sí. Quien hace la ley hace la trampa. ¯\_(ツ)_/¯

En honor a la verdad, te diré que este es el método más engorroso de los tres, pero aún así es interesante conocerlo. Esta técnica tiene dos partes: En primer lugar consiste en colocar la imagen de fondo dentro de un pseudoelemento ::before posicionado en absoluto por encima a la vez que le aplicamos un filtro de escala de grises :

    body::before {
        content: " ";
        position: absolute;
        top: 0;
        right:0;
        bottom:0;
        left: 0;
        background-image: url(assets/foto.jpg);
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment: fixed;
        filter: grayscale(100%);
    }

    main {
        position: relative;
    }

Y tendríamos esto:

Imagen convertida en escala de grises con CSS

A continuación, modificamos su opacidad para que se mezcle con el color de fondo del body que le dará el monotono:

    body {
        background: rgba(2, 34, 58, 1);
    }

    body::before {
        content: " ";
        position: absolute;
        top: 0;
        right:0;
        bottom:0;
        left: 0;
        background-image: url(assets/foto.jpg);
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment: fixed;
        filter: grayscale(100%);
        opacity: 0.4;
    }

    main {
        position: relative;
    }

Por cierto, quizá te habrás fijado en que el elemento main lleva position:relative. Esto es para que se posicione por delante del ::before.

Ojo curvas: Si en vez de trabajar con el body lo haces con otro elemento (por ejemplo, un div), deberás aplicarle también position:relative para definir el contexto de apilamiento sobre el que posicionar el :before. Si esto te suena a chino estúdiate este post, o mejor aún, quizá te vendría bien hacer el curso de HTML y CSS.

El resultado final sería este:

Imagen final del ejemplo 1 en monocromo azul

2 - Con un falso filtro de grises y una sombra interna

Este método ya es más sencillo. Aprovechamos que en CSS3 podemos usar varias imágenes de fondo para convertir la imagen en una falsa escala de grises usando linear-gradient y background-blend-mode: saturation; y después le aplicamos por encima color con una sombra interna usando box-shadow.

La propiedad background-blend-mode funciona de forma muy parecida a los Modos de fusión de capa de Photoshop. A modo de curiosidad, el valor saturation toma la saturación de los elementos que están por encima (la sombra interna) y deja el tono y la luminancia de los que están por debajo (en el background-image).

Este es el CSS

    body {
        background-image: linear-gradient(black, black), url(assets/foto.jpg);
        background-blend-mode: saturation;
        box-shadow: inset 0px 0px 3000px 3000px rgba(2, 34, 58, 0.6);
    } 

Y el resultado es muy similar:

Imagen final del ejemplo 2

3 - Atacando la luminosidad de la foto y un color de fondo

En este caso usamos el modo de fusión luminosity. Como el fondo de color está por debajo, solo toma de la foto (que está por encima) la luminancia:

    body {
        background-color: rgba(2, 34, 58, 1);
        background-image: url(assets/foto.jpg);
        background-blend-mode: luminosity;
    }

Y así tenemos otra alternativa, aunque en este caso la imagen queda un poco más clara:

Imagen final del ejemplo 3

Tienes los tres ejemplos en un único archivo htm que va dentro de este .zip. Ábrelo con un editor y vete descomentando las reglas CSS de cada ejemplo para ir probándolos (descomenta uno de cada vez, no los mezcles).

¿Te ha parecido interesante? ¿Se te ocurre algún otro método sin tener que recurrir a JavaScript? Cuéntamelo en los comentarios.

Fecha de publicación:
Pablo Iglesias Pablo Iglesias es diseñador en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.