什么时候使用IMG和CSS背景图像？

Question

什么时候使用IMG和CSS背景图像？在什么情况下使用HTML更合适IMG标记来显示图像，而不是css。background-image反之亦然？因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。

Answer 1

对我来说这是个黑白的决定。如果图像是内容的一部分，如徽标、图表或人(真实的人，而不是股票照片人)，则使用<img />标签加ALT属性。对于其他一切，都有CSS背景图像。

另一次使用CSS背景图像是在做图像替换文本的时候。段落/标题。

Answer 2

我很惊讶还没人提起这件事：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.