css——背景属性（上）

背景属性

background属性用于设置盒子的背景颜色或者背景图片。

background是一个复合属性。backgorund: color image repeat position/size attachment ;

1. background-color

背景颜色值。

背景色默认是会延伸到border下方的：

<style>
  #wrap{
    width: 100px;
    height: 100px;
    background-color: #ff6600;
    border: 10px dashed #000;
  }
</style>
<div id="wrap"></div>

2. background-image

插入背景图片

/* case 1 : 不插入背景图 默认 */
div{ background-image: none; }
​
/* case 2 : 插入背景图 */
div{ background-image: url("路径"); }

同上，背景图片默认也是会延伸到border下方的。

• 背景与内容的层叠关系3D示意图

3. background-repeat

背景图片平铺方式

/* case 1 : 背景图片平铺 默认*/
div{ background-repeat: repeat; }
​
/* case 2 : 背景图片不平铺 */
div{ background-repeat: no-repeat; }
​
/* case 3 : 背景图片水平平铺 */
div{ background-repeat: repeat-x; }
​
/* case 4 : 背景图片垂直平铺 */
div{ background-repeat: repeat-y; }

4. background-position

设置背景图片位置；

background-position:X Y; X和Y默认是：0 0

X允许的取值方式	Y允许的取值方式
left左对齐 center水平居中 right右对齐	top顶部对齐 center垂直居中 bottom底部对齐
百分比	百分比
px	px

如果只给一个值，那么第二个值默认center（50%）;

X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。