The difference between a CSS background map and HTML insert img

It has always been thought that the CSS background image and directly inserted IMG Image effect is similar, until recently read a great God's work, found that most of the pictures are shown through the background map, so by searching the relevant data, here summarizes the difference between the two:

1. The images in CSS are in the form of a background image, and the images written in HTML exist as labels. In the Web page loading process, the image that exists in the CSS background waits until the HTML structure is loaded, and the IMG tag in the HTML is part of the page structure (content) that is loaded during the loading of the structure.

Attached: In a simple page composed of HTML and CSS, the background image is always last loaded, so if we want to use a smaller background image as a placeholder for the loading of large images or flash files to the user to prompt, most of the time I am afraid it will not achieve the effect, Because background images are sometimes loaded even after large images or flash files have been loaded.

2. Usually non-content images (that is, the elements used to decorate the page) are written in CSS, if the content of the image is written in HTML. For example, you want to make a beautiful photo album, then the frame of the picture is written in the CSS, the picture frame content is written in the HTML.

3. Picture as background, when the picture does not load or fails to load, there will not be a placeholder for the picture, there will be no red fork.

The difference between a CSS background map and HTML insert img