背景

background 简写属性：
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
-background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置。
并且该样式没有顺序要求，也没有哪个属性是必须写的。
注意：
background-size 必须写在 background-position 的后面，并且使用/隔开。
background-position/background-size
background-origin 和 background-clip 两个样式，origin 要在 clip 的前边。

• 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载。
  浏览器加载外部资源时是按需加载的，用则加载，不用则不加载。
  像我们上边的练习，link 会首先加载，而 hover 和 active 会在指定状态触发时才会加载。
  雪碧图：
  解决图片闪烁的问题:
  可以将多个小图片统一保存到一个大图片中，然后通过调整 background-position 来切换显示的图片。
  这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题。
  这个技术在网页中应用十分广泛，被称为 css-sprite 这种图被称为雪碧图
  雪碧图的使用步骤：
  1.先确定要使用的图标
  2.测量图标的大小
  3.根据测量结果来创建一个元素
  4.将雪碧图设置为元素的背景图片
  5.设置一个偏移量以显示正确的图片
  雪碧图的特点：
  一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。
  
  让图片在盒子中铺满：
  

背景图一半颜色，一半图片：