在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?

这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。


当前回答

HTML用于内容,CSS用于设计。图像是必要的,它需要被屏幕阅读器拾取吗?如果答案是肯定的,那么就把图像放到HTML中。如果它纯粹是为了样式化,那么您可以使用CSS中的background-image属性来注入图像。正如这里很多人已经提到的,如果愿意,可以在图像上使用伪元素。

其他回答

当我想让它们100%可拉伸时,我使用image而不是background-image,大多数浏览器都支持。

关于使用CSS TranslateX/Y(正确的html动画方式)动画图像-如果你做一个Chrome时间轴记录的CSS背景图像被动画和IMG标签被动画,你会发现绘制时间大大缩短了CSS背景图像。

只是在工作中抛出一个扳手-我的意见是,你不应该使用img标签。HTML意味着内容,而不是视觉风格。你页面上的所有图像都应该来自CSS,让你的HTML代码纯粹。(即使它确实需要更长的时间来构建)

图像的大小呢?如果我使用img标记,浏览器将缩放图像。如果我使用css背景,浏览器只是从较大的图像中切割一块。

对我来说,这是个非黑即白的决定。如果图像是内容的一部分,如logo、图表或人物(真实人物,而不是库存照片人物),则使用<img />标记加上alt属性。其他的都有CSS背景图片。

另一个使用CSS背景图像的时间是在做文本的图像替换时。段落/头。