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

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


当前回答

关于使用CSS TranslateX/Y(正确的html动画方式)动画图像-如果你做一个Chrome时间轴记录的CSS背景图像被动画和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属性容易得多。

如果您将CSS放在外部文件中,那么将站点中频繁使用的图像(例如头部图像)显示为背景图像通常是很方便的,因为这样您以后就可以灵活地更改图像。

例如,假设你有以下HTML:

<div id="headerImage"></div>

...和CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

几天后,您更改了图像的位置。你所要做的就是更新CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

否则,您必须在每个HTML文件中更新适当的<img>标记的src属性(假设您没有使用服务器端脚本语言或CMS来自动化该过程)。

另外,如果你不希望用户能够保存图像,背景图像也是有用的(尽管我从来没有需要这样做)。

Img是一个HTML标记是有原因的,因此应该使用它。用于引用或说明事物,如在文章中。

此外,如果图像有意义或必须是可点击的,img比css背景更好。对于所有其他情况,我认为,css背景可以使用。

尽管这是一个需要反复讨论的话题。

来自法国巴黎的学生