Cómo invertir colores de elementos e imágenes usando CSS
Tuve este problema. Agregué una imagen en “negro sobre blanco” a una página y me di cuenta de que con el modo oscuro, mi página cambia correctamente el fondo a negro, pero la imagen permanece en blanco sobre negro.
Un poco malo.
Entonces agregué esta regla a mi CSS para detectar el modo oscuro e invertir automáticamente el color de la imagen:
@media (prefers-color-scheme: dark) { .my-image { filter: invert(100%); }}
No es 100% exacto en mi caso, porque mi color de fondo oscuro no es perfectamente negro, pero es mejor que nada.
Para perfeccionar las cosas, también puedes agregar la imagen usando una imagen de fondo CSS en lugar de una img
etiqueta en HTML, y podría cambiarla fácilmente en modo oscuro.
Tips de CSS
Tal vez te puede interesar:
Cómo invertir colores usando CSS
Tuve este problema. Agregué una imagen en “negro sobre blanco” a una página y me di cuenta de que con el modo oscuro, mi página cambia correctamente el
programar
es
https://aprendeprogramando.es/static/images/programar-como-invertir-colores-usando-css-2179-0.jpg
2024-10-16
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente