1、打开WebStorm开发工具，新建‘test.html’文件，并写代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="jz.png" style="width: 500px;height: 500px">
</body>
</html>
其中jz.png图片需要拷贝到test.html同个文件夹内
2、网页中查看效果如下图，这是一幅静态的png图像
3、给这张png图像，添加背景色，修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="jz.png" style="width: 500px;height: 500px;background-color: red">
</body>
</html>
4、网页中查看效果如下图，对比第二步的图像发现，这张图像的背景是全透明，网页红色的全部透过来，但是图像中花的阴影是半透明，这就是png格式图像的特性，可以是半透明的，而gif必须是全透明
5、此外png图像也可以是动态，这点和gif图像一样，但是png图像的色彩要更丰富，可以将一张gif图直接重命名为png图，下图第一个是gif格式，第二个是重命名为png格式的
6、修改代码，添加上一步的timg.png图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="timg.png" style="width: 500px;height: 500px;background-color: red">
</body>
</html>
7、在网页中查看效果如下图，依然是动图
