背景属性
CSS 背景属性用于定义HTML元素的背景。
| 属性 | 描述 | 格式 |
|---|---|---|
| background-color | background-color 属性定义了元素的背景颜色。 | body {background-color:#b0c4de;}（页面的背景颜色使用在body的选择器中） |
| background-image | background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 | body {background-image:url(‘paper.gif’);}（页面背景图片设置） |
| background-repeat | background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复，定义了图像的平铺模式。取值： 1.repeat：默认。背景图像将在垂直方向和水平方向重复。 2.repeat-x ：背景图像将在水平方向重复。 3.repeat-y：背景图像将在垂直方向重复。 4.no-repeat：背景图像将仅显示一次。 5.round：背景图像自动缩放直到适应且填充满整个容器。（CSS3） 6.space：背景图像以相同的间距平铺且充满整个容器或某个方向。 |
body { background-image: url(stars.gif); background-repeat: repeat-y; } |
| background-position | background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这一点开始。注意： 1.position后面是x、y坐标。可以使用方位名词或者精确单位。 2.如果精确单位和方位名词混合使用，或者都是精确单位，如：background-position：80% top，则必须x坐标在前，y坐标在后 3.默认值为（0% 0%），如果指定一个值，省略其中一个，则默认为50%（中）。 4.两个值都为方位名词，方位名词没顺序，谁在前都可以，如果省略其中一个，则默认为center。 |
1.background-position： length length（length代表百分数或者由浮点数字和单位标识符组成的长度值） 2.background-position： position position（方位词：top、center、bottom、left、right）。 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。取值： 1.scroll ：默认值。背景图像会随着页面其余部分的滚动而移动。 2.fixed ：当页面的其余部分滚动时，背景图像不会移动。 |
body { background-image: url(bgimage.gif); background-attachment: fixed； } |
| background | background 简写属性在一个声明中设置所有的背景属性。没有严格的属性值先后顺序，如果不设置其中的某个值，也不会出问题。 | 个人建议： background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置(其他属性值请查看文档) |
| 背景半透明（CSS3） | 将背景颜色取值为rgba（r， g， b， a）a取值0~1之间。背景半透明是指盒子背景半透明，盒子里面的内容不受影响（如背景图像不受影响）。同样可以给文字和边框透明，都是rgba格式。 | background: rgba(255, 255, 255, 0.9); |
| background-size（CSS3） | background-size 属性规定背景图像的尺寸。取值： 1.length ：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”，即等比例缩放。 2.percentage（%） ：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 3.cover ：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 4.contain ：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。即等比例缩放，保证图片始终完整显示在背景区域。 |
background-size: length|percentage|cover|contain; |
| 多背景（CSS3） | 以逗号分隔可以设置多背景。注意： 1.一个元素可以设置多重背景图像。 2.每组属性间使用逗号分隔。 3.如果设置的多重背景图片之间存在交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。 4.为了避免背景色将图像盖住，背景色通常都定义在最后一组上。 |
div{ width: 500px; height: 500px; background: url(images/1.jpg) no-repeat left top, hotpink url(images/2.jpg) no-repeat right bottom } |
