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

PNG-24 es un formato excelente. Sirve tanto para esquemas, diagramas, gráficos y texto como para imágenes complejas y con muchos colores, porque admite una cantidad de colores prácticamente ilimitada.

En fotografías, normalmente pesa más que JPEG, aunque suele ofrecer mejor calidad. Aun así, a veces la diferencia de tamaño no importa y se puede usar PNG sin problema.

La gran ventaja de PNG-24 es el soporte real para semitransparencia. Ningún otro formato común lo resuelve tan bien. Por eso, cuando se trabaja con fondos complejos, sombras suaves y otros detalles gráficos, PNG-24 suele ser la mejor opción.

Comparen el gatito en PNG-8 del ejercicio anterior con el gatito en PNG-24 de este ejercicio. Fíjense especialmente en cómo se ven los bordes sobre el bloque amarillo y sobre el bloque con degradado.

Siempre pueden usar 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. Definan la imagen de fondo cat_cage.png para los elementos con la clase block.

    © 2023-2026, codigoheroe.com