logo标签列表

带有图像背景的div和img标签之间的区别。

htmlimage
8

我想知道关于带背景和img标签的div的最佳实践。我知道带背景的div可以放置其他内容，但如果只有一张图片呢？哪种方法更好？也许更好的问题是.. img标签已经过时了吗？当你有一张图片需要链接时，应该使用img标签还是div呢？

谢谢！ Matt Mueller

5个回答
15

Div的背景应该只是用于样式的背景图像。当你要以图片本身的形式显示实际图片，比如你正在展示某物的照片时，你应该使用img标签而不是div背景。

9

将其视为语义标记：

  1. 如果它是页面上的“图像”，就使用img标签，因为这与页面的含义相符。

  2. 如果它对于页面的含义不那么重要，例如背景图片，则可以在任何元素（而不仅仅是div）上使用背景图片。

这种差异对于大多数浏览器中页面的显示并没有太大影响，但对于那些不能通过视觉解释图像的人来说，具有不同的含义。

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

搜索引擎的行为也可能会略有不同-我不知道搜索引擎是否会在其图像搜索中选择背景图像。如果您真的希望图像出现在搜索结果中，则使用img标记更为安全。

1
准确来说：语义。同时请记住，img标签具有alt属性。这个替代文本（例如描述图像）对于图像具有语义含义的场景非常有用，并且可以用于搜索引擎、听力障碍者和网络连接差的文本到语音应用程序。 - Paul Lammertsma
1
更不用说它是适合打印的了。 - Paul Lammertsma
5

这个图片是用来布局还是内容呢？如果这个图片是与布局相关的，我会使用CSS将其放在一个div中；如果是与内容相关的，我会在一个img标签中使用它。

希望这能帮助到你！

5
一个很好的方法是关闭样式表查看您的网站。您会很快发现，所有带有背景图片的DIV标签都不会出现。所有IMG标签图像都在应该出现的位置。我建议使用带有背景图片的DIV标签来设计和布局网站，并为其他所有内容使用IMG标签。
IMG标签具有alt属性和title属性。当图像无法加载或在纯文本或屏幕阅读器类型的浏览器中替代图像时使用它们。
1

IMG标签并不过时。你可以用它来处理系统中动态出现和消失的图片。

在div上使用背景图片非常有用，特别是当你的设计中包含一组静态图片时。有时候你可以将它们合并成一张大图，以减少加载时间和每页的HTTP请求次数。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接