Tarea anterior
Fondos10/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 PNG-24

PNG-24 es un formato excelente. Es muy adecuado para esquemas, dibujos, gráficos, texto e imágenes multicolor complejas, ya que admite un número casi ilimitado de colores.

En fotos, suele ser inferior a JPEG en tamaño de archivo, pero superior en calidad de imagen. Pero a veces la diferencia de tamaño de archivo es tan poco crítica que puedes usar PNG.

La ventaja más importante de PNG-24 es la total compatibilidad con la translucidez, que no está disponible en ningún otro formato. Por lo tanto, no hay alternativa a PNG-24 en el desarrollo web a la hora de diseñar fondos complejos, elementos gráficos con sombras complejas, etc.

Compare el gatito en PNG-8 de la tarea anterior y el gatito en PNG-24 de esta tarea. Especialmente cómo se ven sus bordes en el bloque amarillo y el bloque de degradado.

Siempre puede utilizar PNG-24 en lugar de PNG-8.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Formato PNG-24</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block"></div> </div> <div class="box box2"> <div class="block"></div> </div> <div class="box box3"> <div class="block"></div> </div> </body> </html>
CSS
.box { width: 300px; height: 140px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .box1 { background-color: #2ecc71; } .box2 { background-color: #f1c40f; } .box3 { background-image: linear-gradient(to bottom, #2ecc71, #f1c40f); } .block { height: 134px; background-repeat: no-repeat; background-position: 50% 50%; }

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
    1. Establecer elementos con block de clase para tener una imagen de fondo cat_cage.png.

    © 2023-2025, codigoheroe.com