CSS背景的设置

对于固定不变的内容，如图标等用背景图。对于可变的内容，图片是和内容相关的，需要点击跳转的用图片
背景颜色

padding会有背景色，而margin没有

背景图片设置
1、background-image: url(http://xxxx.jpg)； 服务器上一般是相对路径。在一个高清屏上展示的话，图片大小一般是显示大小的二倍

2、background-position: 0px 0px/center;

3、background-size: 30px 30px; / ie9及以上能用/

4、background-repeat: no-repeat; /repeat, repeat-x, repeat-y/

css sprite(雪碧图|精灵图) 在线工具当加载图片或者icon时，每加载一次就是一个请求，如果有多个回影响服务器响应，浪费网络资源，合成成一张大图，以后每次就可以加载缓存
把多个背景图片合成一张，通过background-position定位图片，减少网络请求

• 对小icon另一个减少网络请求的方法，将其转化为base64的字符串，不通过请求，直接放到样式里面,不能太大，对实时性要求特别高的网页
  background:url() position repeat;默认是各个数字代表的含义

• background-size的常用值包括：

  1、auto，默认值，保持背景图片的原始高度和宽度；
  2、length/percentage，设置背景图像的高度和宽度(像素或以父元素的百分比表示)。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”；
  3、cover，保持图片的原始比例扩展至足够大，以完全覆盖背景区域。背景图像的多余部分可能会超出显示区域；
  5、contain,保持图片的原始比例，元素容器包含进所有的图片内容。

• 背景图片中用url
  img标签用src

• 背景色透明和整体透明区别：

背景色：背景的颜色透明 ；整体透明：字体、颜色、图片所有都透明

opacity作用于元素，设置全局透明度，对元素内所有内容的进行透明度设置，会继承父元素的 opacity 属性；
rgba()作用于元素的颜色及背景色透明度设置。
两种都不被IE支持(IE9开始支持)