background:
background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position] / [ background-size]
[background-origin] [background-clip];
默认值:inherit(no)
值 | 描述 | CSS | Default |
---|---|---|---|
background-color | 规定要使用的背景颜色。 | 1 | transparent |
background-image | 规定要使用的背景图像。 | 1 | none |
background-repeat | 规定如何重复背景图像。 | 1 | repeat |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 | scroll |
background-position | 规定背景图像的位置。 | 1 | 0% 0% |
background-size | 规定背景图片的尺寸。 | 3 | auto |
background-origin | 规定背景图片的定位区域。 | 3 | padding-box |
background-clip | 规定背景的绘制区域。 | 3 | border-box |
eg:
.example {
background: aquamarine url(img.png)
no-repeat
scroll
center center / 50%
content-box content-box;
}
background-origin:绘制区域,表示背景图片从哪里开始绘制;
background-clip:显示区域,从哪里开始显示origin绘制的图片(如果显示区域小于绘制区域进行裁剪)
background-position:表示绘制区域相对于origin的偏移