带图像背景的Div与img的标签

Question

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

谢谢！ Matt Mueller

Answer 1

Div背景应该就是这样：背景图像的风格。 img标签应该适用于当您将实际图像显示为图像本身时，例如您正在显示某种图片。你应该使用图像标签而不是div bg

Answer 2

是用于布局或内容的图像吗？

如果图像的布局有关，我会使用CSS，它有一个div ...如果它的内容涉及我会有它在IMG ...

希望帮助！

Answer 3

IMG标记不是过时的。您可以将它与动态图像一起使用，来自您的系统。

当你有一组静止的图像作为你设计的一部分时，div上的背景图像很有用。有时你可以将它们合并成一个大的图像，以最小化加载时间和HTTP请求页面的数量。

Answer 4

想想它作为语义标记：

1. 如果它是一个“形象”的页面上，只要页面的意思，使用img标签。

2. 如果它对页面的含义没有那么重要，即。背景图像，在任何元素（不只是一个div）上使用背景图像。

这种差异对于页面在大多数浏览器中的显示方式无关紧要，而是与那些不直观地解释图像的人有不同的含义。

试着想象一下这些元素如何被视觉障碍者解读。

搜索引擎也可能有一些稍微不同的行为 - 我不知道搜索引擎是否会为他们的图片搜索选取背景图片。如果你真的想要那里的图像，一个img标签是更安全的。

Answer 5

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

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