图片应该从 CSS 中引用还是从 Content 文件夹中引用 <img/>答案

【问题标题】：Should images be referenced from CSS or from Content folders with <img/>图片应该从 CSS 中引用还是从 Content 文件夹中引用 <img/>
【发布时间】：2010-08-07 15:54:13
【问题描述】：

我问是因为我的朋友早些时候在How to resolve issue with image path when testing HtmlHelper? 上发布了一个问题，我们办公室里的一些人讨论了如何解决这个问题。

其中一个人建议如果他从 CSS 中引用图像，他不会遇到这个问题（测试崩溃，因为它依赖于 IIS 中的功能）。

他的观点非常有道理，但它有点让我们退缩，因为我们一直在使用 <img/> 引用图像。我们一直都做错了吗？我们都不是该领域的专家，所以我认为值得将其提交给社区。参考图像的最佳方式是什么？

【问题讨论】：

如何引用 CSS 中的图像？除了background-image?
@Pekka，我不知道.. 听起来是个好问题 - 贴出来！
那是一个反问；）我没有意识到你的同事实际上意味着将所有内容都放入 background-image 属性中（这是一个糟糕的想法 IMO）。

标签： html css image

【解决方案1】：

使用 CSS background-image 和内联 <img /> 标签有很多好处。 CSS 背景图像非常适合装饰元素（内容边框、背景图案等），因为它们可以用background-repeat 重复。但是，它们对于以内容为中心的图像来说是一个糟糕的选择，例如产品照片、生物头像等。在这里，内嵌图像效果最好，因为您可以使用 ALT 属性，并且无论浏览器如何都显示图像（一些较旧的移动浏览器不t 支持 CSS 中的背景）。

【讨论】：

优点 - 谢谢。描述表格列的可排序性的图像怎么样？这就是我的朋友难以接受的那种形象。应该是 css 还是 <img />？
如果控件是基于 AJAX/Javascript 的，我会说做任何更容易的事（因为可访问性和 SEO 不是问题）。如果点击排序按钮在页面上执行传统的 GET 请求，我会尝试将其作为正确的图像输入。让我知道这种区别是否有意义-

【解决方案2】：

标签是最好的方式。

它符合标准、易于访问且对 SEO 友好。

【讨论】：

...但在许多情况下，装饰图像不属于img 元素。参见例如标题等。

【解决方案3】：

在我看来，不加选择地将所有图像放入 CSS background-image 属性是一个糟糕的主意。只是你剥夺了自己的一些东西：

您无法拉伸和调整图像大小（有时可能是必要的）
您不能使用 ALT 属性（正如 David 已经说过的）
背景图片通常不会被打印出来
它们不会被搜索引擎索引
用户很难存储它们
缺少的图像不会在 IE 中显示为“损坏的图像”图标
糟糕的浏览器布局引擎可能会出现缩放问题，因为周围的容器可能会与图像内容分开（但在 FF 中应该不是问题）
你总是需要一个额外的容器来放入background-image，这样你就不能例如对图像元素进行 DOM 操作

<img> 标签的存在是有原因的，绝对应该在适当的地方使用（即图像是内容的一部分，而不是装饰或背景）。对于“排序图标”，我支持大卫所说的，这两种方式都很好，但如果它是一个可点击的元素，它应该是一个img。

【讨论】：