What is the difference between png and jpg in html/css
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.
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>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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to convert PNG to JPG on Windows 11
May 12, 2023 pm 03:55 PM
How to Convert PNG to JPG on Windows 11 On Windows 10 and 11, you can use Microsoft's built-in Paint app to quickly convert image files. To convert a PNG image to JPG on Windows 11, use the following steps: Open File Explorer and navigate to the PNG image you want to convert. Right-click the image and select Open With > Draw from the menu. Your photo or image opens in the Paint app. Note the file size at the bottom of the screen. To convert a file from PNG to JPG, click File and select Save As > JPEG Image from the menu. When the file resource
Fix: Can't open JPG files in Windows 11
Apr 17, 2023 pm 12:37 PM
JPG is one of the most popular image file formats along with PNG. This is a lossy compressed image format ideal for websites. Therefore, many users save or convert images to JPG format. However, some users have stated that they are having issues opening JPG files in Windows 11 using the platform’s default Photos app. Therefore, these users cannot open, view and edit JPG format images in Windows 11. This is what one user said in a Microsoft forum post: When double-clicking a JPG file to open in Microsoft Photo, I receive the error The specified program cannot be found. This was purchased new about a month ago
Let's talk about how to use php to easily convert WebP to JPG.
Mar 24, 2023 pm 02:57 PM
In recent years, with the continuous development of Web technology, WebP, a new image format, has gradually entered the field of vision of programmers and Web developers. The advantages of WebP cannot be ignored: small file size, high quality, high browser support, etc. But in some cases, we may need to convert WebP images into some other formats, such as JPG. So, how to use PHP to convert WebP to JPG?
What format is jpg?
Jun 21, 2023 am 11:36 AM
JPG is a JPEG format file. The JPEG format is the most commonly used image file format, with the suffix ".jpg" or ".jpeg". JPG format standards are divided into three types: JPEG, progressive JPEG, and JPEG2000. It is a standard generally used for continuous-tone static image compression. It is lossy compression, which compresses data images in a small storage space while causing loss of image data. Damage, if the user has higher requirements for image quality, it is recommended to abandon this image file format, especially for some high-definition pictures.
What does jpg mean?
Nov 28, 2022 am 09:46 AM
JPG generally refers to the JPEG format, which is an image format saved using a lossy compression method. It is a standard for continuous tone static image compression. Its file suffix is ".jpg" or ".jpeg". JPG files mainly use a joint coding method of predictive coding (DPCM), discrete cosine transform (DCT) and entropy coding to remove redundant images and color data; it can compress images in a small storage space, but to a certain extent will cause damage to the image data.
How to convert svg to jpg format
Nov 24, 2023 am 09:50 AM
svg can be converted to jpg format by using image processing software, using online conversion tools, and using the Python image processing library. Detailed introduction: 1. Image processing software includes Adobe Illustrator, Inkscape and GIMP; 2. Online conversion tools include CloudConvert, Zamzar, Online Convert, etc.; 3. Python image processing library, etc.
How to rename the extension of all files within a folder, including subfolders
Apr 14, 2023 pm 12:22 PM
Suppose you need to rename the extension of a file from one extension to another, say jpg to png. It's easy, of course! But what if you have multiple files whose extensions need to be changed? Or worse, what if these multiple files are also located in multiple folders and subfolders, within a single folder? Well, for a normal person, this can be a nightmare. But for a geek, absolutely not. The question now is, are you a geek? Well, with the help of Geek Page, you definitely are! In this article, we explain how to easily rename the extension of all files within a folder, including subfolders of your choice, from one extension to another through a batch script method. Notice:
What is the difference between png and jpg
Feb 23, 2024 pm 04:21 PM
png and jpg are two common image file formats, which differ in the compression, quality and transparency of the image. First, let's look at how they compress. JPG (also called JPEG) uses a lossy compression algorithm to reduce file size by reducing detail and color information in the image. This compression method can significantly reduce file size, but will lose some detail, especially at high compression ratios. PNG (also called Portable Network Graphics) uses a lossless compression algorithm, which does not lose any image details and provides higher
