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

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


当前回答

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

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

其他回答

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

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

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

此外,我有一个画廊部分,有不一致的图片大小,所以即使这些图像显然被认为是内容,我使用背景图像和中心它们在divs设置大小。这类似于facebook在他们的相册里做的事情。

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

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

如果你只想为页面上的特殊内容或仅为一个页面添加图像,你应该使用IMG标签,如果你想把图像放在多个页面上,那么你应该使用CSS背景图像。

如果您希望图像是流动的并可缩放到不同的屏幕尺寸,则可以使用IMG标记。对我来说,这些图片主要是内容的一部分。对于大多数不属于内容的元素,我使用CSS精灵来保持最小的下载大小,除非我真的想要动画图标等。