解决img和background-image选择困境的终极指南！

探讨 <img>标签和background-imageCSS属性

你是否也对这两个有选择困难症？
实际上这是很多人都会有的困惑。它们二者看起来平平无奇，但在选择上却需要咱们去精挑细选。这篇文章总结了一些常见的具体应用场景，以及该做的抉择。文章开始先介绍了二者的区别，快来看看这些区别你是否都了解呢？

二者的区别

1. <img>属于DOM节点，而background-image属于CSS属性
2. <img>图片不设置宽高时会按图片原本的大小渲染出来
3. background-image依托于一个DOM元素，若不给盒子设置宽高则不会显示
4. background-image更容易被控制位置、大小和样式

选择困境终极指南

1. 如果你希望图像成为常规页面流中内容的一部分时，请使用 HTML img 标记
2. 如果你希望在用户打印页面时包含图像，请使用 HTML img 标记
3. 若考虑到SEO（搜索引擎优化）时，希望图像由浏览器编入索引（包含替代文本）时，请使用 img 标记
4. 如果你需要保存图像，请使用 HTML img 标记
5. 当图像不是常规页面流的一部分时，以及在页面上仅显示图像的一部分并用于更多装饰目的的情况下，请使用 CSS background-image 属性
6. 当你不希望打印页面上的图像时，请使用 CSS background-image 属性
7. 如果需要缩短图像下载时间（与 CSS Sprite 一样），请使用 CSS background-image 属性
8. 如果要将图像用于动画或变换图像状态，请使用 CSS background-image 属性