css-background

• background-image
• background-repeat
• background-attachment
• background-size
• background-position
• background-origin
• background-color(未涉及)
• background-clip

background-image:

后面接url+路径的形式。表示图片路径

background-repeat

设置背景图片是否重复

• repeat 默认。背景图像将在垂直方向和水平方向重复。
• repeat-x 背景图像将在水平方向重复。
• repeat-y 背景图像将在垂直方向重复。
• no-repeat 背景图像将仅显示一次。
• inherit 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment

设置背景图片是否跟随容器内容一起滚动
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。

background-size

设置图片尺寸

background-size: length|percentage|cover|contain;

| length |

设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

| cover |

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

| contain |
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-position

设置图片位置

方式一

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果您仅规定了一个关键词，那么第二个值将是"center"。
默认值：0% 0%。

方式二

x% y%
第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

方式三

xpos ypos
第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。

三种方式可以混合使用。
如

background-position:center 100px

background-origin

背景图启示位置与内容的关系。

• border-box | 背景被裁剪到边框盒。
• padding-box | 背景被裁剪到内边距框。
• content-box | 背景被裁剪到内容框。

background-clip

与background-origin类似，不过这个属性作用于backgrond-color