Background属性

css背景属性用于定义HTML元素的背景

背景属性既可以为单个的单元设置背景，也可以为整个页面设置背景，可以对上述二者的任意组合设置背景，段落、文字、不同状态的链接、图像、内容区域修改其背景样式。设置背景有很多属性可以利用。将在下文中详细解释这些属性的用法。

简写方式：background: #00FF00 url(bgimage.gif) no-repeat fixed top;

定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

可以为所有的元素设置背景颜色，从整体页面到单个元素都可行。

background-color属性取值为color（颜色值）或是transparent（透明）

transparent 默认值，如果一个元素没有设置背景颜色，那么他就是默认透明的，允许通过父元素的背景颜色，这样其祖先元素就是可见的。

color颜色名称，该属性接受任何合法的颜色值通常使用：

p{color:red;
background-color:blue;
padding:20px;
}

background-size_a_b 可以通过以下属性值控制背景图像的显示大小

.b1
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

background-position_x_y属性取值可以分为三类，x 和 y 可以表示为距离左上角的绝对定位或是百分数，x 标识水平方向上的定位方式，y 表示垂直方向上的定位方式。

关键字：如果仅规定了一个关键字，那么第二个值将会设置为“center”。注意：要把background-attachment取值属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

用left(左对齐)、right(右对齐)、center(居中)表示x；

用top(顶端对齐)、center(居中)、bottom(底端对其)表示y轴。

百分数：可以将x和y设置为百分数（x%和y%），第一个值水平位置，第二个值垂直位置。左上角(0% 0%),右下角(100% 100%),同时水平垂直居中(50% 50%)，如果两个值只规定了一个那么另一个默认是50%。（两个值任意组合）
长度值：x值水平位置，y值垂直位置，左上角0 0（为0的时候不用加单位），单位是像素（0px 0px）或者其他任何单位，单位也可以为负值。多种类型的取值可以混合使用，如（center 30%）background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非设置了不同的位置值。

body
{ 
  background-image:url(1.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}

背景图像的位置是由background-position属性决定的，如果没有规定该属性，那么重复将由页面的左上角开始。

输入background-repeat:direction，这里面direction可以取四个值：repeat、repeat-x、repeat-y、no-repeat。

div
{ 
 1000px;
height: 1000px;
background-image:url(1.jpg);
background-repeat: repeat-y;
}

属性规定background-position属性相对于什么位置来定位，如果background-position的取值为fixed（固定），则该属性没有效果

border-box 背景图像相对于边框盒来定位

padding-box 背景图像相对于内边距框来定位

center-box 背景图像相对于内容区来定位

.b3
{1000px;
height:1000px;
border:10px solid red;
  background-image:url(1.jpg);
  background-repeat:no-repeat;
  background-origin:content-box;  
}

制定背景绘制的区域，取值有四个：

.b4
{
300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}

属性取值有两个：