Theory
Theory

PNG-8 format

Actually, the PNG format is one. And PNG-8 and PNG-24 are its subtypes. We won't go into details, but will analyze typical features.

PNG-8 is similar in characteristics to the GIF format. It is well suited for schematics, drawings, graphs and text, as well as images with few colors. The maximum number of colors is 256.

PNG-8, like GIF, supports transparency. This means that a pixel is either completely transparent or completely opaque.

If you want to make an image with transparency, it is better to set the stroke the same as the background color. Without the stroke, the image will look "bitten off". If the background is not solid (gradient, 3 block in mini-browser), PNG-8 with stroke will look bad.

How is PNG better than GIF? PNG is a more modern and free format. GIF is older and closed. The compression level, quality and other characteristics are about the same, so it is always better to use PNG.

index.html
style.css

HTML

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

GoalsCompleted

Give elements with class block background image cat_cage_8.png.
Then give them another background image cat_cage_8_no_mate.png.