Seguro que más de una vez has tenido que acudir a un software de edición de imágenes para poder manipular una imagen y lo más probable que fuese para convertirla en transparente. Y, aunque no va a ser la panacea para no tener que utilizar una de estas herramientas, vamos a ver cómo podemos eliminar el fondo blanco de una imagen con CSS, lo cual nos puede resultar útil en algunas circunstancias.
Insertar una imagen dentro de nuestra página web
Lo primero que vamos a necesitar es insertar una imagen dentro de la página web. Para ello vamos a utilizar el elemento img, el cual tiene la siguiente sintaxis:
<img src="fichero.extension" alt="texto alternativo" width="ancho" height="alto" />
Por lo que si queremos insertar nuestra imagen llamada “logo.png” escribiremos lo siguiente:
<img src="logo.png" alt="Logo de Ayuda en la Web"/>
Y lo que veremos dentro de nuestra página web será algo parecido a lo siguiente:
Vemos que hemos escogido una imagen en blanco y negro que es el logo de la página Ayuda en la Web, desde lo sencillo hasta lo avanzado. Y qué nos servirá para ese ejemplo consiguiendo hacer transparente el color blanco.
Definiendo el color del fondo de la página
Para poder ver el efecto de eliminar el fondo blanco de una imagen con CSS vamos a tener que poner un color de fondo en nuestra página web. Esto nos permitirá ver el contraste y que el efecto funciona.
Para poder definir el color del fondo de la página, nos apoyamos en la propiedad CSS background-color aplicada directamente al elemento HTML body.
body {
background-color: lightcoral;
}
Como podéis ver hemos puedo un color de fondo llamado lightcoral. Aunque puedes utilizar el que más quieras dentro del listado de colores principales de HTML.
Manejando los filtros en CSS
Una vez que tenemos ya la imagen y el fondo de la página configurado, vamos a pasar a eliminar el fondo blanco de una imagen con CSS. Lo que vamos a realizar es utilizar la propiedad filter de CSS. La propiedad filter en CSS nos permite aplicar filtros a la imagen.
Hay varios filtros que podemos usar para modificar la apariencia de una imagen o un elemento usando la propiedad filter de CSS. Estos filtros nos permiten hacer ajustes en el aspecto visual de los elementos en nuestra página web:
blures un filtro que podemos usar para desenfocar una imagen. Esto puede ser útil cuando queremos resaltar un elemento en primer plano o darle un aspecto suave a un fondo.brightnesses otro filtro que nos permite modificar el brillo de una imagen. Podemos usarlo para aclarar una imagen oscura o atenuar una que sea demasiado brillante.- El filtro
contrastnos permite ajustar el contraste de una imagen. Esto puede ser especialmente útil cuando queremos resaltar ciertos detalles o colores en una imagen. grayscalees un filtro que convierte una imagen a blanco y negro. Esto puede ser útil cuando queremos darle a nuestro sitio web un aspecto clásico o minimalista.- El filtro
saturatenos permite saturar el color de una imagen. Este filtro puede ser útil cuando queremos hacer que los colores en una imagen sean más vivos y vibrantes. - … y muchos más
Usando filtros para eliminar el fondo blanco de una imagen con CSS
Pero, ¿cómo utilizamos la propiedad filter de CSS para poder eliminar el fondo blanco de una imagen con CSS? La idea es aplicar mucho brillo sobre la imagen, esto hará que se resalten las partes más blancas de la imagen.
Para ello vamos a darle un valor de 1. Aunque dependiendo de la imagen que tengas, podrás tener que elevar o reducir este valor.
.remove-bg {
filter: brightness(1);
}
Vemos que hemos creado una clase que hemos llamado remove-bg la cual utilizaremos posteriormente sobre la imagen en la que vamos a realizar el filtro.
Mezclar elementos mediate la propiedad mix-blend-mode
¿Con esto ya tenemos resuelto el eliminar el fondo blanco de una imagen con CSS? La verdad es que no, todavía nos queda un paso más. Tenemos que aprender a mezclar elementos mediante la propiedad mix-blend-mode.
Es decir, lo que buscamos es mezclar la imagen con el fondo para que se produzca la transparencia.
Algunos de os valores que podemos dar a la propiedad CSS mix-blend-mode serán los siguientes:
normal, este es el valor por defecto y significa que no se aplica ninguna mezcla.multiply, este modo se multiplican los colores de los elementos de la imagen y el fondo, lo que resulta en una mezcla más oscura.screen, este modo es lo opuesto amultiply. Los colores de los elementos de la imagen y el fondo se invierten, se multiplican y luego se invierten de nuevo para dar un resultado más claro.- …
Lo que vamos a utilizar en este ejemplo para eliminar el fondo blanco de una imagen con CSS es el valor multiply que consigue la mezcla oscura. Así que lo añadimos a la clase remove-bg que hemos definido anteriormente.
.remove-bg {
filter: brightness(1);
mix-blend-mode: multiply;
}
Ya solo nos quedará aplicar la clase remove-bg sobre nuestra imagen. Esto lo hacemos gracias a la propiedad HTML class de la siguiente forma:
<img src="logo.png" class="remove-bg" alt="Logo de Ayuda en la Web">
Y ahora sí que ya tendremos todo preparado para poder tener funcionando nuestro código que nos permite eliminar el fondo blanco de una imagen con CSS.
