html_css_background(背景)_ZHOU125disorder_

background(背景)

background的复合型写法
backgorund: * color image repeat position/size attachment ;
background: * 颜色 图片路径 平铺方式 位置/大小 是否滚动*

1.background-color(背景颜色)

背景颜色默认会延伸到border下方

<div></div>
        div{
            width: 100px;
            height: 100px;
            background-color: #096;
            border: 10px dashed #ddd;
        }

background-image(背景图片)

背景图片默认会延伸到border下方

<div></div>
#默认不插入图片
div{
background-image: none;
}
#插入图片
div{
background-image: url("图片路径");
}

background-repeat(背景平铺)

图片默认平铺

#背景图片默认平铺 
div{ background-repeat: repeat; }

#不平铺
div{ background-repeat: no-repeat; }

#水平平铺
div{ background-repeat: repeat-x; }

#垂直平铺 
div{ background-repeat: repeat-y; }

background-position(位置)

位置默认(0,0)

#默认(0,0)
background-position: x,y;#(x,y)默认(0,0) 

x可以取得值: left左对齐 center水平居中 right右对齐 百分比 px;
y可以取得值：top顶部对齐 center垂直居中 bottom底部对齐 百分比 px;

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

background-size(大小)

通常用于在不改变图片宽高比的情况下，铺满盒子.

background-size:X Y; X和Y默认和原图 宽 高 对应，同时X Y可以是自己设定的百分比或像素

background-size:cover; 等比例缩放直到铺满X轴和Y轴；

background-size:contain; 等比例缩放直到铺满X或Y轴其中一个；

background-attachment(滚动)

background-attachment：scroll; 默认值，背景随滚动而滚动；

background-attachment: fixed; 背景不随滚动而滚动

新增不常用背景属性

• ·background-clip(裁剪)·
  背景（颜色/图片）的显示是会延伸到border区域的，clip可以用于设置背景延伸到哪个位置，把不需要的部分剪裁掉。

background-clip: border-box; 默认值，延伸到border位置

background-clip: padding-box; 只延伸到padding位置，剪裁掉border部分的背景内容

background-clip: content-box; 只延伸到内容部分，剪裁掉padding和border部分的背景内容

background-origin(起始位置)

背景的起点位置默认是border的左顶点，origin可以设置背景的起始位置。这个属性通常用来控制背景图片的起始位置，因为背景颜色不管从哪里起始都是一个颜色看不出什么变化。

backgruond-origin: border-box; 默认值，以border左顶点作为背景起点

background-origin: padding-box; 以padding左顶点作为背景起点

background-origin: content-box; 以内容部分左顶点作为背景起点