Función CSS en escala de grises()

La función grayscale() en CSS es una función incorporada que se usa para aplicar un filtro a la imagen para establecer la escala de grises de la imagen.

Sintaxis:

grayscale( amount )

Parámetros: esta función acepta una sola cantidad de parámetro que contiene el valor de la escala de grises. El valor de la escala de grises se establece en términos de número y porcentaje. El valor 0% representa la imagen original, mientras que el valor entre 0% y 100% representa los multiplicadores lineales del efecto.

Ejemplo: El siguiente ejemplo ilustra la función grayscale() en CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>CSS grayscale() Function</title>
    <style>
    h1 {
        color: green;
    }
     
    body {
        text-align: center;
    }
     
    .grayscale_effect {
        filter: grayscale(100%);
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS grayscale() function</h2>
        <img class="grayscale_effect"
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
             alt="GeeksforGeeks logo">
</body>
 
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con la función grayscale() se enumeran a continuación:

  • Google Chrome 18.0
  • Microsoft Edge 12.0
  • Firefox 35.0
  • Safari 6.0
  • Ópera 15.0

Publicación traducida automáticamente

Artículo escrito por jit_t y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *