Función grayscale() de CSS

Definición y uso

CSS grayscale() La función de filtro convertirá la imagen en escala de grises.

• 100% (o 1) convertirá completamente la imagen en escala de grises
• 0% (o 0) no tendrá efecto

Ejemplo

Ejemplo 1

Establecer diferentes valores de gris para las imágenes:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

Prueba personal

Ejemplo 2

convierte grayscale() con backdrop-filter Uso combinado de propiedades:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: grayscale(50%);
  backdrop-filter: grayscale(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Prueba personal

Sintaxis de CSS

grayscale(amount)

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Páginas relacionadas

Referencia:Atributo filter de CSS

Referencia:Función blur() de CSS

Referencia:Función brightness() de CSS

Referencia:Función contrast() de CSS

Referencia:Función drop-shadow() de CSS

Referencia:Función hue-rotate() de CSS

Referencia:Función invert() de CSS

Referencia:Función opacity() de CSS

Referencia:CSS saturate() función

Referencia:CSS sepia() función