The difference between and in css

background-image is the backgroundimage, which is a style of css

< img / > is a block-level element, which is an image, It is a tag of html

background-image can only be viewed

< img / > can be operated. For example, changing the path of img src can achieve the purpose of changing the image, or you can move its position, remove it from document, etc.

Background is a CSS3 style

img is an HTML tag, and there is an essential difference between the two.

background-image exists in a large background, and its attributes have various settings and rich transformations

You can write on img and add other elements you want to add

Generally speaking, if it is a decorative picture, use background-img. If it is very related to the stylistic content, use img

During the loading process of the web page, the image background-image that exists as the css background image will not start loading until the structure is loaded (after all the content of the web page is displayed), and the tag img in html is the web page Part of the structure (content) will be loaded during the process of loading the structure. In other words, the web page will first load the content of the tag img, and then load the background image background-image. If you use to introduce a large image, then in Until this image is downloaded, the content after img will not be displayed. If you use css to introduce the same image, the background image will not be loaded until the web page structure and content are loaded, which will not affect the browsing of the web page content.

This is the case. In extreme cases, such as the background of the entire page, I will not hesitate to use background-image, but a single image, such as a logo, only needs to be loaded, and there is no need to modify it. What complex operations it does, my understanding is that if it can be implemented in HTML, there is no need to write it in CSS. The simpler, the better. But when I saw a piece of code where all the images were written with div background images, I was suddenly confused. Is this right or wrong? Can someone tell me the pros and cons? For example, is there a difference in loading? SEO difference? thanks!

To put it simply, img is the content part, and background-image is the decorative thing.

A little bit of text is

img

In terms of page elements, if the pictures on the page appear as content, such as advertising pictures, such as product pictures, then This must use img, because this is the page element content. The most critical point about the content of page elements is that when the page has no style, you can still know what it is at a glance...

background-image

Background image, decorative content , dispensable in the page. Yes, it is to make the visual experience of the page more beautiful; No, it does not affect the user's browsing of the webpage to obtain content.

In fact, to put it bluntly, the background image is loaded through the style to make the page more beautiful, and the content image is to be displayed to the user. Suppose one day your web page does not have any style, then at this time please think about which pictures on your website are for users to see, this will be enough.

The foreground image img is a data-based thing and belongs to the content to be displayed on the page.
The background image is a decorative thing, so it’s okay not to use it.

For example, the user image must be the foreground image; the product list image is also the foreground image. However, some of the pictures in the product list have a recommendation label or a price reduction label in the upper left corner, which is definitely a modification.

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