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

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


当前回答

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

其他回答

有些答案把情况复杂化了。这是一个非常简单的情况。

每次你想放一张图片的时候就回答这个问题:

这是内容的一部分还是设计的一部分?

如果你不能回答这个问题,你可能不知道你在做什么或你想做什么!

此外,不要仅仅因为你想要“打印机友好型”而考虑这两种技术。也不要从SEO的角度用CSS隐藏内容。如果您发现自己在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背景可以使用。

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

来自法国巴黎的学生

在多个皮肤或设计版本的情况下使用CSS背景图像。Javascript可以用来动态地改变一个元素的类,这将迫使它呈现不同的图像。如果使用IMG标签,可能会更加棘手。