Hoy te vamos a aprender cómo oscurecer una imagen utilizando CSS. Esto es algo muy util, y realmente muy sencillo, que te servirá para distintos proyectos.
Oscurecer una imagen con filter en CSS
Una forma de oscurecer una imagen usando CSS es con la propiedad filter. Esta propiedad es super util porque permite aplicar filtros a cualquier elemento. En este caso, lo usaremos para oscurecer el elemento <img>.
Paso 1: Crear la estructura en HTML
Primero definimos la estructura en HTML de nuestra imagen. Te recomiendo usar una clase para poder aplicar CSS a este luego.
<img src="https://regardis.com/wp-content/uploads/imagentipotumblr01.png" class="oscurecer">
El resultado sería una imagen tal cual:
Paso 2: Aplicar CSS para oscurecer la imagen
Ahora vamos a usar la propiedad filter de CSS para oscurecer la imagen. Debemos cambiar el brillo de la imagen con el filtro brightness.
.oscurecer{
filter: brightness(50%);
}Como puedes ver, hemos colocado un valor de 50% al filtro de brightness, lo cual le quitará brillo a la imagen, haciéndola más oscura.
- Un valor menor a 100% indica que la imagen perderá brillo, y se oscurecerá
- El valor de 100% indica que la imagen se muestra tal cual, en su estado original.
- Un valor mayor a 100% indica que la imagen obtendrá más brillo.
El resultado final será el siguiente:
Si deseas una imagen más oscura, puedes ir bajando más el porcentaje. Por otro lado, si la imagen es muy oscura, puede subir el porcentaje.
Si tienes alguna pregunta, déjanos un comentario para poder ayudarte.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
