学编程的第十七天

一、背景的基础设置

1.background-color ： 设置背景颜色

2.background-image：来设置背景图片

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

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

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

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

7.background-size：设置图片的大小

二、雪碧图

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

2、雪碧图使用步骤

一、背景的基础设置
1.background-color ： 设置背景颜色

这个在之前的文章里都提到过
2.background-image：来设置背景图片

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

可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色

这句话的意思是background-color可以设置一个元素的背景色，background-image为元素设置背景图片
3:background-repeat：用于设置背景图片的重复方式

可选值

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

举个例子：

设置内容的样式 ： 
 .box1 {
        width: 300px;
        height: 300px;
        margin: 0 auto;
		background-color: goldenrod;
		background-image: url(./img/gaitubao_小图_png.png);
		background-repeat: repeat;
      }
内容区：
   <div class="box1"></div>
   图标字体（iconfont）
大多情况下，我们的图标字体，是有专门图标库，或者从框架里找
       -在网页中经常需要使用一些图标，可以通过图片来引入图标
       但图片本身比较大，也不灵活
       -所以使用图标时，我们还可以将图标直接设置为字体，
            然后通过font-face的形式来对字体进行引入
       -这样我们就可以通过使用字体的形式来使用图标

       图标库
      1、 http://www.fontawesome.com.cn/faicons/
      2、阿里巴巴矢量图标库
      如图所示，由于图片比较小，所以双方向平铺了

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

意思是图片不会重复，只有一张，这样会漏出背景的底色，除非图片和背景的大小相同

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

意思是像上图一样会水平方向平铺，显现的结果是只有上面一行图片

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

意思是像上图一样会垂直方向平铺，显现的结果是只有下面一行图片
4:background-position：可以调整背景图片在元素中的位置

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

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

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

top left 左上

bottom right 右下

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

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

第一个值是水平偏移量

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

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

第二个是垂直偏移量

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

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

举个例子

设置内容区的样式
     .box1 {
        width: 300px;
        height: 300px;
        margin: 0 auto;
		background-color: goldenrod;
		background-image: url(./img/gaitubao_小图_png.png);
		background-repeat: repeat;
        background-position:50px 50px;
      }
内容区
    <div class="box1"></div>