是应该使用<img/>从CSS或内容文件夹引用图像

Question

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

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

他的观点非常有道理，但它有点让我们失望，因为我们总是用<img/>引用图像。我们一直都做错了吗？我们都不是这方面的专家，所以我认为值得投入社区。什么是参考图像的最佳方式？

Answer 1

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

Answer 2

标签是最好的方式。

它符合标准，可访问且SEO友好。

Answer 3

在我看来，不分青红皂白地将所有图像放入CSS background-image属性是一个可怕的想法。只是你剥夺了自己的一些东西：

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

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