在 HTML 中使用 img 标签 src 属性来显示图像和在 CSS 中设置样式有什么区别？答案

【问题标题】：What is the difference between using img tag src attribute in HTML to display image and styling it in CSS?在 HTML 中使用 img 标签 src 属性来显示图像和在 CSS 中设置样式有什么区别？
【发布时间】：2015-06-01 13:02:07
【问题描述】：

结果是一样的，但我想在 HTML 中使用 img 标签 src 属性来设置图像和在 CSS 中设置图像样式是有区别的。例如：

在 HTML 中：

<img src="//notrealdomain.com/some.png">

和

在 HTML 中：

<img id="my-pic" src="">

在 CSS 中：

#my-pic {
    background-image: url(//notrealdomain.com/some.png)
}

【问题讨论】：

When to use IMG vs. CSS background-image?的可能重复
我觉得可能的重复帖子更多是关于策略，而这更多是关于技术差异。 OP 建议“结果是一样的”，但这根本不是真的，另一篇文章没有解决这些固有的风格差异。一方面，我确实觉得这个问题没有得到很好的研究，但另一方面，我认为它是有用且清晰的。我想所选答案对于其他对技术而非战略差异有相同兴趣的人来说将是一个很好的资源。
您的帖子似乎没有被正式标记为重复；如果是这样，标题将附加[重复]。但是@Alexander 提出了社区中许多明智的高级成员会做的可能性。见：Why are some questions marked as duplicate?
@gfullam，虽然在“结果相同”部分缓存有点欺骗了我，但研究得很少。快速提问。需要做什么才能使这个问题不被标记为重复？我对 Stack Overflow 的方式是新手且缺乏经验。另外，我应该编辑我的问题吗（比如删除“结果相同”的那部分）？
无需编辑您的问题以删除原始措辞，特别是因为该措辞已在 cmets 中指出。如果您想展示您在提问之前所做的研究，您可以添加对您尝试过的搜索词的解释或指向您已经检查过但未提供您正在寻找的确切答案的 SO 上的其他类似问题的链接。

标签： html css

【解决方案1】：

让我们对比一下。

仅仅提供background-image 属性是不够的，因为img 元素没有固有的height 或width，而background-image 属性不能以与设置src 属性可以。因此，如果没有声明尺寸，则应用 CSS 的图像不会显示。

#my-pic {
    background-image: url(//placehold.it/150);
}

<img src="//placehold.it/150" />
<img id="my-pic" src="" />

您可以强制img 标记使width 和height 等于background-image 的标记，如果您希望它的行为类似于src 应用的图像。注意：在某些浏览器中，损坏的图像占位符图标将显示在background-image 的顶部。

#my-pic {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url(//placehold.it/150);
}

<img src="//placehold.it/150" />
<img id="my-pic" src="" />

但这具有原生img 和src 属性组合所没有的限制，例如仅定义height 或 width 并保留自然约束的能力.

#my-pic {
    display: inline-block;
    width: 150px;
    background-image: url(//placehold.it/300);
}

<img src="//placehold.it/300" width="150" />
<img id="my-pic" src="" />

此外，将width 和height 设置为自然尺寸以外的任何值，只会裁剪background-image，而不是像img 的本机行为那样对其进行强制约束。

#my-pic {
    display: inline-block;
    width: 300px;
    height: 150px;
    background-image: url(//placehold.it/300);
}

<img src="//placehold.it/300" width="300" height="150" />
<img id="my-pic" src="" />

您可以使用其他属性来实现各种结果，例如background-attachment、background-clip、background-origin、background-position、background-repeat 和 background-size。

但如果您使用这些样式，您可能不应该使用img 标签作为您的容器； div 或其他具有语义含义的包含元素会更适合这项工作。

关于alt文本，如果src属性中定义的图片加载失败，alt属性的值会按预期显示；而赋予 CSS 应用图像的 alt 属性始终显示并根据文本基线调整 inline-block 元素的对齐方式。

#my-pic {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url(http://placehold.it/150);
}

#my-pic-failed {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url(//failedtoload.png);
}

<img src="http://placehold.it/150" alt="Alternate text"/>
<img src="//failedtoload.png" alt="Alternate text"/>
<img id="my-pic" src="" alt="Alternate text" />
<img id="my-pic-failed" src="" alt="Alternate text" />

【讨论】：

感谢@Djuka 关于alt 属性行为差异的建议。
当然，@gfullam。我仍然无法摆脱我忘记了什么的感觉......

【解决方案2】：

两者的主要区别在于，一个用于背景（css），另一个用于前景（html）。

Foreground Image (i.e. <img> tag) = content

Background Image (i.e. image specified in CSS) = design

从以下链接阅读全文。

【讨论】：

1stwebdesigns.com/blog/development/…

【解决方案3】：

使用 img 标签可以设置背景和前景图像，但使用 css 只能设置背景图像。并且所有其他属性都可以在 inline css 和 external css 中设置

【讨论】：