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

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


当前回答

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

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

其他回答

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

我想再补充两个论点:

An img tag is good if you need to resize the image. E.g. if the original image is 100px by 100 px, and you want it to be 80px by 80px, you can set the CSS width and height of the img tag. I don't know of any good way to do this using background-image. EDIT: This can now also be done with a background-image, using the background-size CSS3 attribute. Using background-image is good when you need to dynamically switch between sprites. E.g. if you have a button image, and you want a separate image displayed when the cursor is hovering over the element, you can use a background image containing both the normal and hover sprites, and dynamically change the background-position.

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

当我想让它们100%可拉伸时,我使用image而不是background-image,大多数浏览器都支持。

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