站長資訊網
區別：1、png格式支持透明，jpg格式不支持透明；2、png格式是無損壓縮的圖片，占內存大，而jpg格式是有損壓縮的圖片，占內存小；3、png格式的網頁加載速度慢，jpg格式的網頁加載速度快。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
剛開始寫網頁時覺得插入圖片能夠用就行了，根本不管圖片格式，今天才知道原來網頁中.png和.jpg格式的圖片的使用是有一定區別的，相見恨晚啊..后面是個小彩蛋：固定位置返回頂部設計…
eg:
1）.png：支持透明，顏色比較廣，圖片質量高，比較常用，是無損壓縮的圖片，占內存大，網頁加載速度慢；
2）.jpg：不支持透明，占內存小，網頁加載速度快，是有損壓縮的圖片。
案例：
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景</title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 1000px; height: 800px; /*同時插入兩張背景：第一張是花瓣，支持透明顯示，第二張是草原，不支持透明顯示*/ background-image: url("../img/散亂漂浮桃花花瓣.png"),url("../img/cy.jpg"); background-position: 0 0,0 0; background-repeat: repeat,no-repeat; background-size: 300px,1300px; } .go-top{ width:60px; height: 60px; background: magenta; font-size: 14px; border-radius: 10px; position: fixed; bottom: 50px; right: 50px; transition-duration: 1s; } .go-top a{ display: block; text-decoration: none; padding: 10px 12px; } .go-top:hover{ background: greenyellow; transition-duration: 1s; } </style> </head> <body> <div> <p>lalalalalallalalala</p> <p>lalalalalallalalala</p> <p>lalalalalallalalala</p> <p>lalalalalallalalala</p> <p>lalalalalallalalala</p> <div> <a href="#top">返回頂部</a> </div> </div> </body> </html>
如果你交換了兩張背景圖片的順序（即.jpg格式的圖片在上面，.png格式的在下面，便會是這種效果）：
可見：.png格式支持透明，.jpg格式不支持。
