关于背景图片的 CSS 样式

有时候会遇到使用背景图还是图片的问题。

• 背景图：固定不变的内容，需要使用div标签来包裹内容
• 图片：img 标签的 src 属性值时后端给的。一般用于可变的（如头像），可点击的。

一般来说，使用到背景图片，会涉及到如下 CSS 样式：

• background-image: url();/背景图的路径/
• background-position: left top | center;/偏移位置/
• background-size: contain | cover | width height;/背景图尺寸/
    cover:图片完全覆盖容器（图片可能溢出）。
    contain:容器包裹图片（图片可能无法完全覆盖容器）。
  background-size: 100px 80px;背景图宽度100px，高度80px
• background-repeat: no-repeat | repeat-x | repeat-y;/背景图重复性/
• background-attachment: fixed | scroll; 规定背景图像是否固定或者随着页面的其余部分滚动。

CSS sprite 雪碧图

在线制作雪碧图
  因为一个图片作为logo或者icon展示时，每一个url，会在页面渲染时发送一条网络请求（浪费网络资源），所以把这个较小的logo放在同一张图片上，再通过background-position来进行定位。（这样就只发送一次请求）。
  background-position 使用时和 margin 类似。top使用负值可以把背景图上拉。
  最后，还有一种减少网络请求的方式：把小图标转换为based64的字符。（图片---->数据，实时性好一些）