大家好ヽ( o･ｪ･)ﾉ。随便写写哈。
background-color 属性
首先从最简单的开始，设置背景的颜色值。
初始值: transparent
是否继承属性: 否
关于继承可能有同学不是很懂，这里附注简单理解一下：
我们都知道html标签都是层层嵌套的，我给外层设置了属性，而内层也被应用了这个属性，那么这个属性就是继承的。
继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。
属性值
- transparent：默认值。指定背景颜色应该是透明的。其实这个属性大部分情况下并不会使用。
- color：指定背景颜色。
- 预定义的颜色名称： 规定颜色值为颜色名称的颜色（比如 red）。
- 十六进制颜色：规定颜色值为十六进制值的颜色（比如 #ff0000）。
- RGB颜色： 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
- RGBA颜色：RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。RGBA（红，绿，蓝，alpha）。Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
- HSL颜色：IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。HSL（色调，饱和度，明度）。（比如hsl(120,65%,75%)）。
- HSLA颜色：HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。HSLA（色调，饱和度，亮度，alpha）。
- 特殊的关键字。很有趣的关键字currentColor。(๑￫ܫ￩)
- currentColor：css3的属性。可以替换使用到颜色值的地方，意思是当前颜色，确切的说是当前的标签所继承的文字颜色。currentColor = color的值。
- 继承。同样使用的不多，但是合理的运用继承又能使CSS 代码更加符合 DRY（Don't Repeat Yourself 避免重复代码）原则。
- inherit：继承。规定背景颜色从父元素继承。
- initial：IE 不支持该关键字。默认。
- unset：不设置。如果该属性是默认继承属性，该值等同于 inherit，如果该属性是非继承属性，该值等同于 initial。background-color 为非继承属性，所以现在相当于 initial。
使用示例
background-color: red; /* Keyword */
background-color: #bbff00; /* Hexadecimal */
background-color: rgb(255, 255, 128); /* RGB */
background-color: hsla(50, 33%, 25%, 0.75); /* HSLA */
background-color: transparent; /* Special keyword */
background-color: inherit; /* Global values */
background-color: initial; /* Global values */
background-color: unset; /* Global values */
background-color: currentColor; /* Special keyword */
指定颜色值
currentColor的使用
background-image 属性
设置一个元素的背景图像，可以设置一个或者多个背景图像。但是注意，如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。
默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
初始值: none
是否继承属性: 否
属性值
每个背景图像被明确规定为关键字 none 或是一个
- none：默认值。不显示背景图像。
-
值 ：url('URL')。指向图像的路径。 - 继承：见
background-color属性，这里不重复介绍。 - 渐变属性：CSS3的属性。
- linear-gradient() 函数：创建一个线性渐变的 "图像"(从上到下)。（例如 linear-gradient(red, yellow, blue)。从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色。）
- radial-gradient() 函数：用径向渐变创建 "图像"。
- ** repeating-linear-gradient() 函数**：重复的线性渐变 "图像"。
- ** repeating-radial-gradient() 函数**：重复的径向渐变 "图像"。
使用示例
/* 单个背景图 */
background-image: url("../../media/examples/aaa.png");
/* 多个背景图 */
background-image: url("../../media/examples/lizard.png"),
url("../../media/examples/star.png");
/* 渐变色*/
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
url("../../media/examples/lizard.png");
背景图设置
background-repeat 属性
定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space)。
初始值: repeat
是否继承属性: 否
属性值
- repeat：默认值，背景图像将向垂直和水平方向重复。
- repeat-x：只有水平位置会重复背景图像。
- repeat-y：只有垂直位置会重复背景图像。
- no-repeat：background-image不会重复。
- space：背景图不会缩放，会被裁切。
- round：缩放背景图至容器大小。
- 继承：见
background-color属性，这里不重复介绍。
使用示例
/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;
/* 双值语法：水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
/* 继承*/
background-repeat: inherit;
背景图像的重复方式
background-position 属性
为每一个背景图片设置初始位置。
这个位置是相对于由 background-origin（css3的属性） 定义的位置图层的。
初始值: 0% 0%
是否继承属性: 否
属性值
-
值 ：定义一组 x/y 坐标（相对于一个元素盒子模型的边缘），来放置这个item。它可以被定义为一个值或者两个值，水平和垂直的位置。如果仅指定一个值，其他值将会是 center 。- top, left, bottom, right。用来指定把这个item 放在哪一个边缘。
- 关键字 center，用来居中背景图片。
- length（px），percentage（百分比）。指定相对于左边缘的 x 坐标，y 坐标的位置。
- 继承：见
background-color属性，这里不重复介绍。
百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则代表图片的中点和容器的中点重合。
使用示例
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* values */
background-position: 25% 75%;
/* values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: 10px 8px;
/* Edge offsets values */
background-position: bottom 10px right 20px;
/* Multiple images */
background-position: 0 0, center;
/* Global values */
background-position: inherit;
背景图片设置初始位置
background-attachment 属性
设置背景图像是否固定或者随着页面的其余部分滚动。
初始值: scroll
是否继承属性: 否
属性值
- scroll：默认值。背景图片随着页面的滚动而滚动。
- fixed：此关键属性值表示背景相对于视口固定。背景图片不会随着页面的滚动而滚动。
- local：此关键属性值表示背景相对于元素的内容固定。背景图片会随着元素内容的滚动而滚动。
- 继承：见
background-color属性，这里不重复介绍。
使用示例
background-attachment: fixed;
background-attachment: scroll;
background-attachment: local;
background-attachment: local, scroll;
背景图像是否固定
background 属性
背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。
各值之间用空格分隔，不分先后顺序。
是否继承属性: 否
使用示例
background: green;
background: no-repeat url("aaa.png");
background: #00ff00 url('aaa.gif') no-repeat fixed center;
背景缩写属性
总结
结束语
来呀，快活呀，反正有大把时光～