15、前端开发：CSS知识总结——背景样式及雪碧图

目录

一、背景样式

1: background-color  设置背景颜色

2:background-image来设置背景图片

3:background-repeat用于设置背景图片的重复方式

4:background-position可以调整背景图片在元素中的位置

5:background-clip设置背景的范围

6:background-origin设置背景图片的偏移量计算的原点,配合偏移量使用的

7:background-size 设置图片的大小

二、雪碧图

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

二、雪碧图使用步骤

---

一、背景样式

1: background-color  设置背景颜色

2:background-image来设置背景图片

  语法：background-image:url(相对路径);

  可以同时为一个元素指定背景颜色和背景图片，

  这样背景颜色将会作为背景图片的底色

        图片在元素中的位置

        如果背景图片大于元素，默认会显示图片的左上角

        如果背景图片和元素一样大，则会将背景图片全部显示

        如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素  

3:background-repeat用于设置背景图片的重复方式

 可选值：

    repeat，默认值，背景图片会双方向重复（平铺）

    no-repeat ，背景图片不会重复，有多大就显示多大

    repeat-x， 背景图片沿水平方向重复

    repeat-y，背景图片沿垂直方向重复

4:background-position可以调整背景图片在元素中的位置

    背景图片默认是贴着元素的左上角显示

可选值：

   该属性可以使用 top right left bottom center中的两个值

   来指定一个背景图片的位置

    top left 左上

    bottom right 右下

   如果只给出一个值，则第二个值默认是center

  也可以直接指定两个偏移量，

        第一个值是水平偏移量

            如果指定的是一个正值，则图片会向右移动指定的像素

            如果指定的是一个负值，则图片会向左移动指定的像素

        第二个是垂直偏移量  

            如果指定的是一个正值，则图片会向下移动指定的像素

            如果指定的是一个负值，则图片会向上移动指定的像素

5:background-clip设置背景的范围

      可选值：

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

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

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

6:background-origin设置背景图片的偏移量计算的原点,配合偏移量使用的

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

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

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

7:background-size 设置图片的大小

  参数：

    第一个值：宽度

    第二个值：高度

     如果只写一个，第二值，默认为auto

    cover  图片的比例不变，将元素铺满

    contain 图片比例不变，将元素完整显示

    设置一个背景颜色
    background-color: #bfa;
    设置一个背景图片
    background-image: url(img/3.png);
    设置背景不重复
    background-repeat: no-repeat;
    设置背景图片的位置
    background-position: center center;
    设置图片大小 
    background-size: ;
    设置图片偏移的原点 
    background-origin: padding-box; 
    设置背景的范围 
    background-clip: padding-box; 


    background
	通过该属性可以同时设置所有背景相关的样式
    没有顺序的要求，谁在前谁在后都行
	也没有数量的要求，不写的样式就使用默认值
    background-size要写在background-position后

二、雪碧图

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

它是优化网站的一种方式

  优点：

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

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

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

二、雪碧图使用步骤

•       先确定要使用的图标
•       测量图标的大小   155*55
•       根据测量结果创建一个元素   155*55
•       将雪碧图设置为元素的背景
•       设置一个偏移量以显示正确的图片

• <style>
   
      .box1{
          
          width:175px;
   
          height:45px;
   
          border:1px solid red;
   
          background-image:url(绝对路径);
   
          background-position：10px  100px;
      
      }
   
  </style>
   
  <div class="box1"></div>