一、背景简写
background: color（背景颜色） image（背景图片） repeat（是否及如何重复） attachment（设置背景图像是固定的还是与页面的其余部分一起滚动） position（背景图位置）；
repeat - 是否及如何重复（background-repeat）：
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
attachment - 背景图像是固定、和页面的其余部分一起滚动（background-attachment）：
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
position - 背景图位置：（background-position）:
| 值 | 描述 |
|---|---|
| (top left) | 如果您仅规定了一个关键词，那么第二个值将是"center"。 |
| (x% y%) | 默认值：0% 0% 第一个值是水平位置，第二个值是垂直位置。 |
| (0px 0px) | 0px 0px 第一个值是水平位置，第二个值是垂直位置。 |
背景色专有属性 （background-clip ）
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒。 |
| padding-box | 背景被裁剪到内边距框。 |
| content-box | 背景被裁剪到内容框。 |
背景图专有属性 （background-size）
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage | 父元素的百分比来设置背景图像的宽度和高度。一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 背景图像扩展至足够大，以使背景图像完全覆盖背景区域。景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
网友评论