什么时候使用IMG vs. CSS背景图像?

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

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

当前回答

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

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

总之，这是一种情境。

其他回答

对我来说，这是个非黑即白的决定。如果图像是内容的一部分，如logo、图表或人物(真实人物，而不是库存照片人物)，则使用<img />标记加上alt属性。其他的都有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来自动化该过程)。

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

还有一个原因!如果你有一个响应式的设计，并且想通过媒体查询来划分低分辨率、中分辨率和高分辨率图像的使用，那么你也应该使用背景。

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

关于使用CSS TranslateX/Y(正确的html动画方式)动画图像-如果你做一个Chrome时间轴记录的CSS背景图像被动画和IMG标签被动画，你会发现绘制时间大大缩短了CSS背景图像。

推荐文章