一、背景属性概述
CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修 饰，从而让网页变得更加的美观。 CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。
二、背景颜色 background-colorbackground-color
- 属性名：background-color
- 作用：在盒子区域添加背景颜色的修饰。
- 加载区域：在 border 及以内加载背景颜色。
- 属性值：颜色名、颜色值。
三、背景图片 background-image
属性名：background-image 作用：给盒子添加图片的背景修饰。 加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始。 属性值：url(图片路径) url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。
通过如上示例，我们看到加载的图片重复显示了，如何改变显示样式呢？
四、背景重复 background-repeat
属性名：background-repeat 作用：设置添加的背景图是否要在盒子中重复进行加载。 根据属性值不同，有四种重复加载方式。该属性要和background-image属性同时使用，如果没有设置background-image属性则background-repeat属性将无效。
（1）repeat属性值（默认值：重复）
（2）no-repeat属性值（不重复）
注意：如果图片不重复，从 border 以内开始加载。
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。从 order 以内开始加载。
（3）repeat-x属性值（水平方向重复）
（4）repeat-y属性值（垂直方向重复）
五、背景定位 background-position
属性名：background-position 作用：主要用于设置不重复的图片在背景区域的加载开始位置。 属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法， 属性值都有两个，值之间用空格分隔。 第一个属性值：表示背景图片在水平方向的位置。 第二个属性值：表示背景图片在垂直方向的位置。
5.1单词表示法
属性值都是使用代表方向的单词进行书写。 水平方向可选单词：left、center、right 垂直方向可选单词：top、center、bottom 单词表示图片与盒子背景区域进行对应方向的对齐。
5.2像素表示法
使用像素值作为背景定位的属性值。 第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。 第二个属性值：像素是几，表示背景图片左上角针对 border以内的左上顶点垂直方向位移的距离。注：图片的左上角是（0，0）原点。
探讨：前端坐标系和数学坐标系的区别？
前端坐标系：向右向下是正，向左向上是负。
数学坐标系：向右向上是正，向左向下是负。
像素值区分正负，正负代表位移方向不同： 正数：表示图片针对盒子的原点向右、向下移动。 负数：表示图片针对盒子的原点向左、向上移动。
注:可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。 制作方法，需要使用 FW 软件量取尺寸，读取数据。
第一步：在设计图中，使用切片工具制作一个想要显示区域大小的切片，让切片左 上顶点位于想要加载的背景部分。
第二步：读取属性栏的切片数据，其中宽、高就是要加载的盒子的宽高，x 和 y 的数 值表示移动的距离的绝对值，直接将数值加负号赋值给背景定位属性。二步：读取属的切片数据，其中宽、高是要加载的盒子的宽高，动的距离的绝对值，直接将数值加负号赋值给背
5.3百分比表示法
百分比表示法使用百分比数字作为属性值。 100%代表的数值： 水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。 垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
六、背景附着 background-attachment
属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值：
七、background属性的综合写法
background 属性可以将五个单一属性的值进行合写。 属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
示例1：颠倒书写顺序不会影响样式效果
示例2：颠倒background-position背景定位
建议按照如下规范书写：
background: url(images/bg4.jpg) no-repeat center top fixed #ccc;八、background属性的综合写法的注意事项
注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。
示例1：我们可以看到，如果不使用单一属性会导致只有背景颜色生效，其他的被层叠成默认样式了，因为我们使用的是background综合属性去书写的。
示例2：我们可以看到，如果使用单一属性会只是单独改变一种样式，其他的不会被层叠掉。
作用：在盒子区域添加背景颜载区域：在 border 及以内加载背景颜色。色名、颜色值。
