跟进背景图像与img标签[重复]

Posted 2023-03-05

【中文标题】跟进背景图像与img标签[重复]

【英文标题】：Follow up to background-image vs img tag [duplicate]

【发布时间】：2014-01-03 07:56:11

【问题描述】：

我刚刚阅读了this entry，但我仍然不太确定选择的原因。特别是，我想准确了解 什么 是“内容”和“非内容/其他”图像的含义，以及 为什么我在添加时应该使用 img添加非内容图像时将内容图像添加到我的网站和背景图像。

这是我对“内容”和“非内容”图像的理解：

内容图像是动态生成的图像。例如，显示在其个人资料页面上的用户图像以及上传到照片库、博客等的图像。

非内容图片是网站设计中的非动态图片。如果你愿意的话，它们会被“烤熟”。例如。徽标、图片链接、图片按钮等。

如果我的定义是正确的——如果不是，请告诉我——那么在我看来，使用 each 的原因如下（尽管这在链接到的文章中并不完全明显，因此我遵循提出问题）：

非内容图像的变化往往不如内容图像。 IE。徽标、按钮图像、图像链接等往往保持不变。只有当网站所有者决定重新设计网站时，它们才会更改。

另一方面，内容图像往往会频繁更改。经常上传新图片，用户更改他们的个人资料图片和照片库等。

因此，由于内容图像的动态特性，他们需要一个 img 标签，该标签可以由网站所驱动的任何技术堆栈动态修改。不那么频繁更改的图像不需要图像标签。它们可以从网站设计资产直接加载到 css 文件中，以提高性能和易于维护。

这是对的还是我错过了什么？

【问题讨论】：

如果我明确链接到它并解释这是一个后续问题，因为原件不够清楚（对我来说），它是如何重复的？

因为您的问题不是很好隔离，并且包含与另一个问题重复的部分。您的主要问题似乎是“内容图像和非内容图像有什么区别？”关于为什么最好对不同类型的图像使用 IMG 或 CSS 的内容是另一个问题的一部分，您应该在 cmets 中要求澄清。这可能看起来有点令人困惑，但当你习惯它时，它就会变得有意义。

【参考方案1】：

img标签可以被SEO抓取，可以使用alt，但是background-image不能

所以，如果你想通过 google、bing 或其他方式获取一些图片，你应该使用 img 标签。

【参考方案2】：

CSS 用于描述表示语义（外观和格式）。因此，如果您使用 css 显示图像，这意味着（理论上）您显示该图像只是为了设置某些元素的样式以使其看起来更好或更好地表达自己。如果将来您要更改网站的外观，您可能也会考虑更改这些图像。

另一方面，内容图像将成为您网站的信息/数据的一部分。如果您显示某些用户的照片，则与样式无关。它与用户的姓名、姓氏或年龄一样重要。