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

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


当前回答

还要注意,大多数搜索引擎蜘蛛不会索引CSS背景图像,因此背景图像将被忽略,你将无法从搜索引擎获得任何流量(简而言之,没有SEO好处)。

其中,所有用标签定义的图像都被索引(除非手动排除),并且如果它们的标题/alt属性和文件名经过适当优化(w.r.t一些关键字),就可以从搜索引擎带来流量。

其他回答

我很惊讶没有人提到这个:CSS过渡。

你可以本地转换一个div的背景图像:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

这将保存任何类型的JavaScript或jQuery动画来淡化<img/>的src。

更多关于MDN转换的信息。

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

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

还有一个原因!如果你有一个响应式的设计,并且想通过媒体查询来划分低分辨率、中分辨率和高分辨率图像的使用,那么你也应该使用背景。

一个小的输入, 我曾经遇到过响应式图像在iphone上的渲染速度减慢长达一分钟的问题,即使是小图像:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

但是当切换到使用背景图像时,这个问题就消失了,这只有在针对较新的浏览器时才可行。

只是一个小的添加,你应该使用img标签,如果你想让用户能够“右键单击”和“save-image”/“save-picture”,所以如果你打算将图像作为资源提供给其他人。

使用背景图像将(据我所知在大多数浏览器上)禁用直接保存图像的选项。