Teoria
Teoria

Formato PNG-8

In realtà, il formato PNG è uno. E PNG-8 e PNG-24 sono i suoi sottotipi. Non entreremo nei dettagli, ma esamineremo le caratteristiche tipiche.

PNG-8 ha caratteristiche simili al formato GIF. È adatto a schemi, disegni, grafici e testo, nonché a immagini con pochi colori. Il numero massimo di colori è 256.

PNG-8, come GIF, supporta la trasparenza. Ciò significa che un pixel può essere completamente trasparente o completamente opaco.

Se si desidera creare un'immagine con trasparenza, è meglio impostare il tratto come il colore dello sfondo. Senza il tratto, l'immagine sembrerà "morsicata". Se lo sfondo non è uniforme (gradiente, 3 blocchi nel mini-browser), il PNG-8 con il tratto avrà un brutto aspetto.

In che modo PNG è migliore di GIF? PNG è un formato più moderno e libero. GIF è più vecchio e chiuso. Il livello di compressione, la qualità e altre caratteristiche sono più o meno le stesse, quindi è sempre meglio usare PNG.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="it"> <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%; }

ObiettiviFatto

Impostare gli elementi con classe block in modo che abbiano un'immagine di sfondo cat_cage_8.png.
Quindi impostarli sulla stessa immagine cat_cage_8_no_mate.png.