Img作为背景图像

时间:2015-04-13 22:04:48

标签: html css image

我可以使img标记使用background-image属性吗?例如,我有两个页面,其中一个有img,另一个有background-image个标签。请注意,在响应式版本中,img会挤压图像,而背景图像会根据大小调整图像。

您可以在img div中找到background-imagesub-header ..

1 个答案:

答案 0 :(得分:3)

这听起来有点迂腐,但有几个原因。

<img>元素表示页面上的内容,这些内容对于查看和理解非常重要。背景图片是蓬松的东西,使网站看起来很漂亮,但删除它们不会影响消息。

您正在混合使用案例。在这种情况下,您应该使用背景图像标题,因为图像不是页面的消息或内容所固有的。

在您显示图表,有人拍摄的照片等时使用<img>元素。

为什么?

  • 正如您所注意到的那样,浏览器会有意识地对待它们,例如,优先显示<img>标记的内容。默认情况下,它会尝试拉伸图像以适应,而背景将被剪裁。

  • 当用户打印页面时,通过CSS媒体查询删除背景图像要容易得多,然后隐藏(正确的)IMG标签。

  • 背景图片也不占用DOM中的空间,并且与其他元素的冲突更少。 IMG标签在文档中流动,很容易从其预期位置移开(创建了大量额外的工作以使它们保持不变)。

  • 右键单击背景图像不会有太大作用。右键单击图像可为您提供与图像相关的选项,例如下载或打开图像。这与<img>标记为主题的内容相同。

还有其他原因,但这一切都归结为semantics。这对您来说似乎不是什么大不了的事,但这可能是因为您没有视力障碍(因此您不经常使用屏幕阅读器)并且并没有真正考虑网络爬虫和许多其他系统尝试从您使用过的标签中提取含义

如果你停止对抗系统并按照预期的方式使用系统,那么你会因许多原因而受益更多。或者,至少,在这样做之前,要知道为什么你正在违反惯例。