1. GIF圖片大多被用來做動圖，但是GIF其實也可以是靜態(tài)的圖片。本例中就是一個靜態(tài)的GIF圖片。打開網頁開發(fā)工具WebStorm，新建''，在頁面寫代碼如下：```html Titl

1. GIF圖片大多被用來做動圖，但是GIF其實也可以是靜態(tài)的圖片。本例中就是一個靜態(tài)的GIF圖片。打開網頁開發(fā)工具WebStorm，新建''，在頁面寫代碼如下：

```html

```

當然要提前拷貝到的同一個目錄。

2. 網頁內查看效果如下圖，這樣看來GIF格式和JPG格式并沒有區(qū)別。

添加動圖GIF效果

3. 添加一個動圖的GIF圖查看效果，修改代碼如下：

```html

```

這里的是一個動圖圖，而且背景是透明的。

4. 網頁中查看效果，如下圖，GIF動圖動了起來。

設置GIF動圖背景色

5. 修改代碼，為GIF動圖設置一個背景色：

```html

```

6. 網頁效果如下，背景顏色會透過GIF圖片顯示出來，這跟JPG圖片有區(qū)別，JPG圖片必須有背景顏色。

7. 放大觀察GIF圖片會發(fā)現(xiàn)周圍的鋸齒，這也是GIF圖像的一個特性。

總之，GIF圖片和JPG圖片在網頁中的應用場景和效果存在一些差異。需要根據實際需求選擇合適的圖片格式。