背景
background的复合性写法
backgorund: *color image repeat position/size* *attachment* ;
background:背景颜色 背景图片地址 平铺 滚动 位置/大小
background-color(背景颜色)
背景色默认是会延伸到border下方的
div{
width: 100px;
height: 100px;
background-color: #096;
border: 10px dashed #ddd;
}
<div></div>
如下图
background-image(背景图片)
/* case 1 : 不插入背景图 默认 */
div{ background-image: none; }
/* case 2 : 插入背景图 */
div{ background-image: url("路径"); }
背景图片也默认延伸到border的下方
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; }
background-position(图片位置)
background-position:x,y; (x与y)默认为(0,0)
| X允许的取值方式 | Y允许的取值方式 |
|---|---|
| left左对齐 center水平居中 right右对齐 | top顶部对齐 center垂直居中 bottom底部对齐 |
| 百分比 | 百分比 |
| px | px |
如果只给一个值，那么第二个值默认center（50%）;
X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。