Teoría
Teoría

Formato PNG-8

En realidad, el formato PNG es uno. Y PNG-8 y PNG-24 son sus subtipos. No entraremos en detalles, pero veremos las características típicas.

PNG-8 tiene características similares al formato GIF. Es adecuado para esquemas, dibujos, gráficos y texto, así como para imágenes con pocos colores. El número máximo de colores es 256.

PNG-8, al igual que GIF, admite la transparencia. Esto significa que un píxel es completamente transparente o completamente opaco.

Si quiere hacer una imagen con transparencia, es mejor que el trazo sea del mismo color que el fondo. Sin el trazo, la imagen parecerá "mordida". Si el fondo no es uniforme (degradado, 3 bloques en mini-navegador), PNG-8 con trazo se verá mal.

¿En qué es mejor PNG que GIF? PNG es un formato más moderno y libre. GIF es más antiguo y cerrado. El nivel de compresión, la calidad y otras características son prácticamente las mismas, por lo que siempre es mejor utilizar 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

Establecer elementos con block de clase para tener una imagen de fondo cat_cage_8.png.
A continuación, ponerlos en la misma imagen sin trazo cat_cage_8_no_mate.png.