En este artículo, aprenderemos cómo aumentar y disminuir el brillo de la imagen en CSS. CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilo utilizado para diseñar una página web para que sea atractiva. La razón para usar esto es simplificar el proceso de hacer que las páginas web estén presentables. Te permite aplicar estilos en las páginas web. Más importante aún, le permite hacer esto independientemente del HTML que conforma cada página web.
La propiedad de filtro se utiliza para establecer el efecto visual de un elemento. Esta propiedad se usa principalmente en el contenido de la imagen para ajustar la representación de la imagen.
Sintaxis:
filter: none|blur()|brightness()|contrast()|drop-shadow()| grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Ejemplo: En el siguiente ejemplo, utilizaremos la propiedad de filtro sin ninguna propiedad.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
background-color:lightgrey;
}
img {
filter: none;
margin-top:60px;
width:80%;
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, aumentaremos el brillo de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
background-color:lightgrey;
}
img {
filter: brightness(120%);
margin-top:60px;
width:80%;
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
Ejemplo 3: En el siguiente ejemplo, disminuiremos el brillo de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
background-color:lightgrey;
}
img {
filter: brightness(30%);
margin-top:60px;
width:80%;
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks image">
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA