Tarea anterior
Fondos12/15
A la lista de tareas
  1. 1. La propiedad background-color
  2. 2. La propiedad background-image
  3. 3. La propiedad background-repeat
  4. 4. La propiedad background-position
  5. 5. Un poco más sobre background-position
  6. 6. La propiedad background-attachment
  7. 7. La propiedad background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato SVG
  12. 12. Formato GIF
  13. 13. Elementos anidados con fondos
  14. 14. Efectos con fondo repetido
  15. 15. Sprites
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Formato GIF

Hoy en día, la única razón realmente importante para usar GIF es que admite imágenes animadas.

En todos los demás casos, conviene usar PNG o JPEG.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Formato GIF</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block block1"></div> </div> <div class="box box2"> <div class="block block2"></div> </div> </body> </html>
CSS
.box { width: 256px; height: 192px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .block { height: 192px; background-repeat: no-repeat; background-position: 50% 50%; } .block1 { } .block2 { }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Definan imágenes de fondo sin repetición para los bloques:

    1. cat_purr.gif en el primer bloque,
    2. cat_walk.gif en el segundo bloque.

    © 2023-2026, codigoheroe.com