html_css_背景(background)属性_ZHOU125disorder_

背景

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轴的值如果给的是方位（单词）值，可以交换顺序。