What is the difference between png and jpg in html/css-Front-end Q&A-php.cn

What is the difference between png and jpg in html/css

青灯夜游

Release： 2021-12-29 16:45:23

Original

14656 people have browsed it

Difference: 1. The png format supports transparency, but the jpg format does not support transparency; 2. The png format is a lossless compressed picture and occupies a large memory, while the jpg format is a lossy compressed picture and occupies a small memory; 3 , png format web pages load slowly, and jpg format web pages load quickly.

What is the difference between png and jpg in html/css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

When I first started writing web pages, I thought that inserting pictures would be enough. I didn’t care about the image format at all. Today I learned that there is a certain difference between the use of .png and .jpg format pictures in the web page. It’s too late to meet them. Ah... there is a little easter egg at the back: fixed position and return to the top design...

eg:

1).png: supports transparency, has a wide range of colors, high picture quality, and is more commonly used. Lossless compressed pictures take up a lot of memory and the web page loads slowly;

2).jpg: does not support transparency, takes up a small amount of memory and has a fast web page loading speed. It is a lossy compressed picture.

Case:

The code is as follows:

<!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>

Copy after login

If you exchange the order of the two background images (i.e. .jpg The picture in the format is on top, and the picture in .png format is at the bottom, this will be the effect):

Visible: .png format supports transparency, and .jpg format not support.

Related recommendations: "html video tutorial"

The above is the detailed content of What is the difference between png and jpg in html/css. For more information, please follow other related articles on the PHP Chinese website!