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

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Formato GIF

Probablemente la única razón para utilizar GIF es que admite imágenes animadas.

En todos los demás casos, utilice 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

    Configure los bloques para que tengan imágenes de fondo que no se repitan:

    1. cat_purr.gif al primer bloque,
    2. cat_walk.gif a la segunda unidad.

    © 2023-2025, codigoheroe.com