溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關html和css中的png和jpg有哪些區別的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
區別：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格式不支持。
感謝各位的閱讀！關于“html和css中的png和jpg有哪些區別”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
