标签：内容 情况下 加载失败 完整性 img 页面 用户交互 遇到 就是
在前端页面的实现过程中，我们经常会遇到这个情况：有一个盒子，盒子里面需要放一张图片。这个时候，我们既可以通过添加image标签来实现，也可以通过设置背景图的形式实现，哪种更好呢？
一般情况下，可能就是哪种顺手用哪个，因为都能实现需要的功能，但如果都是这样的话，html也就没必要做两个标签了。下面就来看一下两者的区别：
| 项目 | image | backgroud-image |
|---|---|---|
| 所属 | dom元素、内容类、 | css样式、修饰类、 |
| 图层位置 | 前景 | 背景 |
| 默认初始尺寸 | 不定 | 固定 |
| 是否会产生回流重绘 | 会 | 不会 |
| 图片加载失败 | dom尺寸默认0，点击事件难以响应 | dom背景无，其他点击事件正常 |
| 样式文件加载失败 | 正常显示 | dom消失 |
| 使用场景 | logo、产品图片、广告图片 | 背景图、角标等 |
从上面可以看出来，img更适合作为内容部分渲染到页面里面，即便样式文件加载失败，也要让用户可以看到的，属于必须要的元素，特别适合作为广告宣传、产品展示类的使用。
而background则相对更适合做修饰类的，即便没能正常加载也并不影响页面整体的内容展示和用户交互，属于锦上添花类型的。
但是这两种方式又都存在着表中所列出的一些问题，针对这些问题，可以做如下优化：
1、img标签指定宽高尺寸，避免页面回流重绘。指定alt属性或者默认图片，在图片加载失败的时候备用。
2、logo元素同时使用img标签和background，并指定不同的图片源，比如一个用资源服务器图片，一个用base64编码(合适的话)，避免那个元素加载不出来导致宣传效果达不到。其实说了这些，也还是要看个人的开发习惯和保证产品完整性需要，下回见吧
标签：内容 情况下 加载失败 完整性 img 页面 用户交互 遇到 就是
原文地址：https://www.cnblogs.com/heioray/p/9392821.html
