Shulou(Shulou.com)06/02 Report--

This article is about the differences between png and jpg in html and css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Differences: 1, png format supports transparency, jpg format does not support transparency; 2, png format is lossless compression of pictures, accounting for large memory, while jpg format is lossy compression of pictures, accounting for small memory; 3, png format page loading speed is slow, jpg format page loading speed is fast.

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

When I first started to write a web page, I just thought that inserting pictures could be used. I didn't know until today that the use of pictures in .png and .jpg formats on the original web page was different. It was too late to meet. At the back is a small egg: return to the top design in a fixed position.

Eg:

1) .png: support transparent, wide color, high picture quality, more commonly used, lossless compressed images, occupy a large amount of memory, slow web page loading speed

2). Jpg: does not support transparent, small memory, fast web page loading speed, is a lossy compression of the image.

Case study:

The code is as follows:

Background * {margin: 0; padding: 0;} .wrap {width: 1000px; height: 800px / * insert two backgrounds at the same time: the first is petals, which supports transparent display, and the second is Prairie, which does not support transparent display * / background-image: url (".. / img/ scattered floating peach petals. PNG"), url (".. / img/cy.jpg"); background-position: 00; background-repeat: repeat,no-repeat Background-size: 300pxJ 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

Return to the top

If you exchange the order of two background images (that is, the image in .jpg format is on top and the image in .png format is below, this will be the effect):

It can be seen that the .png format supports transparency, while the .jpg format does not.

Thank you for reading! This is the end of the article on "what are the differences between png and jpg in html and css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.