HTML---背景样式

1.背景

1: background-color  设置背景颜色
2:background-image来设置背景图片
    - 语法：background-image:url(相对路径);
    -可以同时为一个元素指定背景颜色和背景图片，
        这样背景颜色将会作为背景图片的底色
    -图片在元素中的位置
       如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素    
        如果背景图片大于元素，默认会显示图片的左上角
        如果背景图片和元素一样大，则会将背景图片全部显示
        

3:background-repeat用于设置背景图片的重复方式
 可选值：
    repeat，默认值，背景图片会双方向重复（平铺）
    no-repeat ，背景图片不会重复，有多大就显示多大
    repeat-x， 背景图片沿水平方向重复
    repeat-y，背景图片沿垂直方向重复
4:background-position可以调整背景图片在元素中的位置
    背景图片默认是贴着元素的左上角显示

5:background-clip

    设置背景的范围

      可选值：

          border-box 默认值，背景颜色会出现在边框的下边

          padding-box  背景不会出现在边框，只会出现在内容区和内边距

          content-box  背景只出现在内容区

6:background-origin

    设置背景图片的偏移量计算的原点,配合偏移量使用的

      padding-box  从内部距处开始计算  默认值

      content-box  背景图片的偏移量从内容区处计算

      border-box   从边框开始计算偏移量

2.雪碧图

一、图片整合技术（CSS-Sprite）

  优点：

    1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，

    提高访问效率，提高了用户体验。

    2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

二、雪碧图使用步骤

      1:先确定要使用的图标

      2:测量图标的大小

      3:根据测量结果创建一个元素

      4:将雪碧图设置为元素的背景

      5：设置一个偏移量以显示正确的图片