CSS 中图片是否应该存在文档结构中?

Question

看了css禅意花园这本书有感(可能看的不是很详细)

书中作者更倾向于使用background, 而不是一个专门的<img>标签来设置图片(不仅仅是整个页面的背景, 包括页面标题附近图片, logo等). 有的甚至会在div的最后用几个div, 通过css的绝对定位是控制来展示图片. 与之对应的另外一种做法, 比如标题那里有图片,就直接用img预留位置了.
这两种做法哪种更普遍,主要的优缺点是什么?

Answer 1

当然是图片更普遍，不然这种方法也不会惊到你。

用背景图片的优点：

• 方便使用 CSS 进行图文混排（“正宗”的图文混排其实应该用 float，何曾想 float最广泛的应用领域居然是横向排版 2333333）；
• 背景图片不影响排版，因此不会因为图片加载而引起重排（当然对于 img 标签，实际上可以通过明确给出 width&height，来避免重排）；
• 不用刻意学习(老师懒得教)图片的排版(张鑫旭大神总结过一些)；
• 可以极其方便地制作加载提示/出错提示占位图(img 标签一般需要配合 JS)。

缺点么：

• 语义化、SEO、blablabla……

Answer 2

1. 用图片。魔改 background 不符合语义化。
2. 语义化意味着更好的 SEO、A11y、更好的架构（比如脱离代码层管理）
3. 早期 background 有一些特殊属性，用起来比较方便，现在也不存在了。
4. 明确是背景，那么该用 background 就用