我很惊讶没有人提到这个: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属性容易得多。

只是一个小的添加，你应该使用img标签，如果你想让用户能够“右键单击”和“save-image”/“save-picture”，所以如果你打算将图像作为资源提供给其他人。

使用背景图像将(据我所知在大多数浏览器上)禁用直接保存图像的选项。

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

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

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

来自法国巴黎的学生

图像的大小呢?如果我使用img标记，浏览器将缩放图像。如果我使用css背景，浏览器只是从较大的图像中切割一块。

前景= img。

Background = CSS背景。