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

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


当前回答

这里有一个技术上的考虑:图像是动态生成的吗?在HTML中生成<img>标记往往比尝试动态编辑CSS属性容易得多。

其他回答

我很惊讶没有人提到这个: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转换的信息。

这里有一个技术上的考虑:图像是动态生成的吗?在HTML中生成<img>标记往往比尝试动态编辑CSS属性容易得多。

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

与sanchothefat的回答大致相同,但从不同的角度。我总是问自己:如果我要完全从网站上删除样式表,剩下的元素只属于内容吗?如果是这样,我的工作做得很好。

只在必要的时候使用背景图像,例如容器的图像是平铺的。

其中一个主要的优点是使用图像是更好的搜索引擎优化。