這篇文章給大家分享的是有關(guān)html和css中的png和jpg有哪些區(qū)別的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋成都玻璃鋼坐凳等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身建設(shè)品質(zhì)網(wǎng)站。

區(qū)別：1、png格式支持透明，jpg格式不支持透明；2、png格式是無損壓縮的圖片，占內(nèi)存大，而jpg格式是有損壓縮的圖片，占內(nèi)存??；3、png格式的網(wǎng)頁加載速度慢，jpg格式的網(wǎng)頁加載速度快。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

剛開始寫網(wǎng)頁時(shí)覺得插入圖片能夠用就行了，根本不管圖片格式，今天才知道原來網(wǎng)頁中.png和.jpg格式的圖片的使用是有一定區(qū)別的，相見恨晚啊..后面是個(gè)小彩蛋：固定位置返回頂部設(shè)計(jì)...

eg:

1）.png：支持透明，顏色比較廣，圖片質(zhì)量高，比較常用，是無損壓縮的圖片，占內(nèi)存大，網(wǎng)頁加載速度慢；

2）.jpg：不支持透明，占內(nèi)存小，網(wǎng)頁加載速度快，是有損壓縮的圖片。

案例：

代碼如下：

    
    
    
        *{
            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;
        }
 
 
    


    

        
lalalalalallalalala
        
lalalalalallalalala
        
lalalalalallalalala
        
lalalalalallalalala
        
lalalalalallalalala
 
        

            返回頂部
        
    

如果你交換了兩張背景圖片的順序（即.jpg格式的圖片在上面，.png格式的在下面，便會(huì)是這種效果）：

可見：.png格式支持透明，.jpg格式不支持。

感謝各位的閱讀！關(guān)于“html和css中的png和jpg有哪些區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！