16、前端开发：CSS知识总结——背景及雪碧图的用法

1、背景相关属性用法

1).background-image  设置背景图片

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

2).background-repeat  设置背景图片的重复方式

       可选值：

               repeat，默认值，双方向重复平铺；

               no-repeat，不重复，有多大显示多大；

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

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

3).background-position  调整背景图片在元素中的位置，默认是贴着左上角显示

       用top  right  left  bottom  center设置偏移量~px

4).background-clip  设置背景色的范围

       可选值：

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

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

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

5).background-orgin  设置背景图片的范围

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

       可选值：    

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

               padding-box  从内边距开始计算偏移量

               content-box  从内容区开始计算偏移量

6).background-size  设置图片的大小

       参数：第一个值（宽度）     第二个值（高度）

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

 按图片比列给宽高效果图如下

cover  图片的比例不变，将元素铺满，效果如下

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

2、雪碧图

       图片整合技术：将多个图片整合为一张图片，提高了请求速度，访问效率和用户体验

       使用步骤：

先确定要使用的图标

测量图标的大小

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

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

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

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