Html 何时使用IMG与CSS背景图像？

在什么情况下，使用HTML

IMG

标记来显示图像比使用CSS

背景图像更合适，反之亦然

这些因素可能包括可访问性、浏览器支持、动态内容或任何技术限制或可用性原则。
对我来说，这是一个非黑即白的决定。如果图像是内容的一部分，例如徽标、图表或人物（真实人物，而不是照片人物），则使用
标记加上alt属性。对于其他所有内容，都有CSS背景图像

使用CSS背景图像的另一个时间是在对文本（如段落/标题）进行图像替换时。
默认情况下，浏览器并不总是设置为打印背景图像；如果你想让人们打印你的页面：）
这里有一个技术上的考虑：图像会动态生成吗？在HTML中生成
标记往往比尝试动态编辑CSS属性容易得多。
在多个外观或设计版本的情况下使用CSS背景图像。Javascript可用于动态更改元素的类，这将迫使它呈现不同的图像。使用IMG标记可能会更棘手。
如果您的CSS位于外部文件中，则通常可以方便地将站点中经常使用的图像（如标题图像）显示为背景图像，因为这样您就可以灵活地在以后更改图像

例如，假设您有以下HTML：

<div id="headerImage"></div>

几天后，您更改了图像的位置。您只需更新CSS即可：

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

否则，您必须在每个HTML文件中更新相应的
标记的
src
属性（假设您没有使用服务器端脚本语言或自动化该过程）

另外，如果您不希望用户能够保存图像（尽管我从来没有这样做过），背景图像也很有用。
与大致相同，但从不同的角度来看。我总是问自己：如果我想从网站上完全删除样式表，那么剩下的元素是否只属于内容？如果是这样，我的工作做得很好。
图像的大小如何？如果使用img标记，浏览器将缩放图像。如果我使用css背景，浏览器只会从较大的图像中剪切一块

背景=CSS背景。
正确使用IMG
如果您打算使用
IMG
人物和您希望默认情况下包括图像。
-
当图像具有重要的语义含义时，使用
IMG
（使用
alt
text），例如。这确保图像的含义可以在所有用户代理（包括屏幕阅读器）中传达
IMG的语用
使用
IMG
加上alt属性，如果图像
例如徽标、图表或人物（真实人物，而非照片人物）。
-
如果依赖浏览器缩放来按文本大小的比例渲染图像，请使用
IMG
使用
IMG
因为
按顺序将
IMG
与
z索引一起使用
以填充整个窗口。
注意，CSS3背景大小不再如此；见下文第6条

使用
img
而不是
background image
可以显著提高背景动画的性能
何时使用CSS背景图像
如果需要，请使用CSS背景图像
形象。
-
使用CSS背景图像时
做例如段落/标题。
-
如果您想使用背景图像，请使用
background image
默认情况下，用户和用户不希望包含图像。
-
如果需要缩短下载时间，请使用
背景图像
，如下所示
有
如果只需要图像的一部分可见，请使用
背景图像
，如CSS精灵
使用
background image
和
background size:cover
来拉伸背景图像以填充整个窗口
使用背景图像时，需要绝对指定尺寸。如果您事先不知道或无法确定它们，这可能是一个重大问题

的一个大问题是重叠。如果我想在我的图像上添加CSS内部阴影（
box shadow:inset 0 0 5px rgb（0,0,0,5）
），该怎么办？在这种情况下，因为
不能有子元素，所以需要使用定位并添加空元素，这等同于无用的标记

总而言之，这是一个非常有情境性的问题。
仅在必要时使用背景图像，例如带有平铺图像的容器

使用图像的一个主要优点是更适合SEO
img是一个html标记，因此应该使用它。用于引用或说明事物，例如：在文章中

另外，如果图像有意义或必须可点击，img优于css背景。对于所有其他情况，我认为可以使用css背景

尽管如此，这是一个需要反复讨论的话题

来自法国巴黎的网络学生
此外，我有一个画廊部分，其图片大小不一致，因此，尽管这些图片显然被视为内容，但我使用背景图片，并将它们放在具有固定大小的div中。这与facebook在其相册中的做法类似。
我想再添加两个参数：


如果需要调整图像的大小，则可以使用img标记。例如，如果原始图像是100px x 100px，并且您希望它是80px x 80px，那么您可以设置img标记的CSS宽度和高度。我不知道有什么好方法可以使用背景图像来实现这一点。编辑：现在也可以使用
#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>