Div与图像背景与img标签

Question

我想知道有关背景和img标签的div的最佳做法是什么。我知道有背景的div可以在它们之上有东西而不是它们，但如果只是有一个图像的情况，这是首选的方法？也许一个更好的问题是... img标签已经过时了吗？当你有一个链接的图像时，你应该使用img标签还是div？

谢谢！ 马特穆勒

Answer 1

Div背景应该只是：风格的背景图像。 img标签应该用于当你将实际图像显示为图像本身时，比如说你正在展示一些东西的图片。你应该使用图像标签而不是div bg

Answer 2

将其视为语义标记：

1. 如果它是页面上的“图像”，就页面含义而言，请使用img标记。

2. 如果它对页面的含义不重要，即。背景图片，在任何元素（不仅仅是div）上使用背景图片。

这种差异与页面在大多数浏览器中的显示方式无关，但与不能直观地解释图像的人有不同的含义。

尝试想象视觉障碍者如何解释元素。

搜索引擎的行为可能略有不同 - 我不知道搜索引擎是否会为其图像搜索选择背景图像。如果你真的想要那里的图像，img标签更安全。

Answer 3

是布局或内容的图像？

如果图像与布局相关，我会使用CSS并将其放在div中......如果其内容相关，我会在img中使用它...

希望有所帮助！

Answer 4

查看此问题的一个好方法是在关闭样式表的情况下查看您的网站。您很快就会发现所有带有背景图像的DIV标签都没有出现。您的所有IMG标记图像都应该是正确的位置。我会将DIV标签与背景图像一起用于网站设计和布局的所有方面，并将IMG标签用于其他所有方面。

IMG标签具有alt属性和标题属性。当它们不加载或代替仅文本或屏幕阅读器类型浏览器中的图像时，它们用于代替图像。

Answer 5

IMG标签尚未过时。您可以将它用于来自系统的动态图像。

当您拥有作为设计一部分的静态图像集时，div上的背景图像非常有用。有时您可以将它们合并为一个大图像，以最大限度地减少加载时间和HTTP页面请求的数量。