CSS
HTML
COMPONENTS
CODE HUB
Generador de Contraste CSS
Configuración
Contrast
Clase
Vista previa
Código
Aprende a programar con Lara
Domina los conceptos de programación paso a paso con tu tutora de IA interactiva. Lara explica lógicas complejas, revisa tus ejercicios prácticos y te ayuda a construir una base sólida en el desarrollo de software.
Lecciones de programación interactivas adaptadas a tu propio ritmo.
Empezar a aprender con LaraGenerador de Contraste CSS
La propiedad filter de CSS permite aplicar una serie de efectos de edición de imágenes a un elemento HTML, como una imagen o un cuadro de texto. Uno de estos efectos es el contraste, que permite ajustar el contraste de un elemento.
El valor de contraste determina cuán diferentes son los colores de la imagen con respecto al original. Un valor de contraste más alto aumenta la diferencia entre los colores, mientras que un valor más bajo disminuye esta diferencia.
Aquí tienes un ejemplo de cómo puedes usar la propiedad contraste en CSS:
img {
filter: contrast(100%);
}
img.high-contrast {
filter: contrast(150%);
}
img.low-contrast {
filter: contrast(70%);
}
En este ejemplo, la propiedad filter se aplica a una imagen con tres valores diferentes de contraste. El valor predeterminado es 100%, que no cambia el contraste. Los valores asignados a las clases high-contrast y low-contrast aumentan y disminuyen el contraste, respectivamente.
Es importante tener en cuenta que el soporte para la propiedad filter puede variar entre navegadores, y no todos los navegadores ofrecen los mismos efectos de filtrado. Revisa la compatibilidad de tu navegador y prueba los efectos deseados en varios navegadores para asegurarte de que funcionen correctamente.