Cómo invertir colores usando CSS

 

 

 

Como invertir colores usando css 1

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 imgetiqueta en HTML, y podría cambiarla fácilmente en modo oscuro.

Tips de CSS




Tal vez te puede interesar:

  1. Filtros CSS
  2. Manejo de errores CSS
  3. Importar un archivo CSS usando @import
  4. Normalización de CSS

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

 

Como invertir colores usando css 1
Como invertir colores usando css 1

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

 

 

Update cookies preferences