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

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


当前回答

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

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

其他回答

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

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

IMG首先加载,因为src是在html文件本身,而在背景图片的情况下,源是在样式表中提到的,所以图片在样式表加载后加载,延迟了网页的加载。

使用背景图像时,您需要明确指定尺寸。如果你事先不知道它们或无法确定它们,这可能是一个严重的问题。

<img />的一个大问题是覆盖。如果我想在我的图像上添加一个CSS内阴影(box-shadow:inset 0 0 5px rgb(0,0,0,.5))怎么办?在本例中,由于<img />不能有子元素,因此需要使用定位并添加等同于无用标记的空元素。

总之,这是一种情境。

如果您将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来自动化该过程)。

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