Teoría
Teoría

Formato PNG-8

En realidad, PNG es un solo formato. PNG-8 y PNG-24 son variantes de ese mismo formato. No vamos a entrar demasiado en detalles: aquí nos quedamos con lo importante para el trabajo diario.

PNG-8 se parece bastante a GIF. Va bien para esquemas, diagramas, gráficos, texto e imágenes con pocos colores. El máximo es de 256 colores.

Igual que GIF, PNG-8 admite transparencia. Pero esa transparencia es simple: un píxel es completamente transparente o completamente opaco.

Si necesitan una imagen transparente, suele convenir usar un borde del mismo color que el fondo. Sin ese borde, la imagen puede verse «mordida». Pero si el fondo no es uniforme, por ejemplo si tiene un degradado, PNG-8 con borde se verá mal.

¿Y por qué preferir PNG en lugar de GIF? Porque PNG es un formato más moderno y abierto. GIF es más antiguo y cerrado. Como la compresión y la calidad son parecidas, conviene usar PNG.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Formato PNG-8</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%; }

ObjetivosRealizado

Definan la imagen de fondo cat_cage_8.png para los elementos con la clase block.
Después cambien esa imagen por cat_cage_8_no_mate.png.