When do I use image backgrounds and IMG labels for webpage layout?

When do I use image backgrounds and IMG labels for webpage layout?

Answer 1: the IMG label should be used. In addition to setting ALT and being captured by the engine, it can also be displayed when CSS is streaking.

Answer 2: We recommend that you take a look at the discussion on the so question: HTML-when to use IMG vs. CSS background-image?
Aside from the actual problems, the principle is actually very simple. If an image is part of the webpage content, you should use . Otherwise, you are advised to use the CSS background image. However, the core of the problem is "Whether the logo is part of the webpage content 」.

From the perspective of semantic correctness, individuals tend to use .

Answer 3: 1. It is easier to manage files. In general, JS, CSS, and image files are stored in the same static directory. CSS can directly use the relative address. Of course, some companies use independent domain names to store image files. In this case, this advantage is not obvious; 2. It can also be displayed when CSS is streaking. Text-indent:-9999px; 3. For the Retina screen, you can use CSS to directly adapt to different images;

Answer 4:

Someone has already said in the comment that, if Seo is better, @ Sven's a tag + CSS defines the background image. Zhihu logo uses this method. This method is better than IMG because it is a good anchor text link, and the tag can also add the title attribute, while IMG does not have the anchor text, only the title attribute and ALT text are supported. Currently, the search engine is more user-friendly in text recognition than in alt.
Note: although this method is suspected of cheating on hidden content, it does not affect the user experience because many web designers use this method, so as long as the keywords are not maliciously stacked, I think there is no problem.

Answer 5:

For example, http://dribbble.com
The logo in the upper left corner uses both IMG and background
The IMG logo is purely logo-like and is not influenced by the website design style. When CSS is disabled, it is still displayed as "content, only play the "content" role.
The logo in the background is optimized because of the visual needs of the website, which is regarded as the category of "performance.
Although the details are small, the separation of "content" and "performance" is interpreted to the extreme

Its key code

<style>a {  background: url(background-logo.png);}a img {  height: 0;}</style><a>  </a>

Here we will analyze the logo in the upper left corner.
Backgound is used, and the text is rolled back in the label. When no CSS is available, the word "zhihu" is displayed. It is a text, and the text is not a logo. Obviously, the logo should be part of the content, but if you change this image to an IMG label, it will become white when there is no CSS (because the logo is white ).

Therefore, if your logo does not need to change the visual requirements of the website, IMG (do not forget to replace the text with alt); otherwise, you can try the Dribbble method.