站長(zhǎng)資訊網(wǎng)
區(qū)別：1、png格式支持透明，jpg格式不支持透明；2、png格式是無損壓縮的圖片，占內(nèi)存大，而jpg格式是有損壓縮的圖片，占內(nèi)存??；3、png格式的網(wǎng)頁(yè)加載速度慢，jpg格式的網(wǎng)頁(yè)加載速度快。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
剛開始寫網(wǎng)頁(yè)時(shí)覺得插入圖片能夠用就行了，根本不管圖片格式，今天才知道原來網(wǎng)頁(yè)中.png和.jpg格式的圖片的使用是有一定區(qū)別的，相見恨晚啊..后面是個(gè)小彩蛋：固定位置返回頂部設(shè)計(jì)…
eg:
1）.png：支持透明，顏色比較廣，圖片質(zhì)量高，比較常用，是無損壓縮的圖片，占內(nèi)存大，網(wǎng)頁(yè)加載速度慢；
2）.jpg：不支持透明，占內(nèi)存小，網(wǎng)頁(yè)加載速度快，是有損壓縮的圖片。
案例：
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景</title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 1000px; height: 800px; /*同時(shí)插入兩張背景：第一張是花瓣，支持透明顯示，第二張是草原，不支持透明顯示*/ 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格式的在下面，便會(huì)是這種效果）：
可見：.png格式支持透明，.jpg格式不支持。
