1、属性说明
1.1、background-image
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
值 | 说明 |
---|---|
url(URL地址) | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
inherit | 规定应该从父元素继承 background-image 属性的设置。 |
1.2、background-position
值 | 说明 |
---|---|
left top left center left bottom center top center center center bottom right top right center right bottom |
如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:left top。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
1.3、background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
值 | 说明 |
---|---|
padding-box | 背景图像相对于内边距框来定位。(默认) |
border-box | 背景图像相对于边框盒来定位。 |
content-box | 背景图像相对于内容框来定位。 |
1.4、background-repeat
background-repeat 属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 。 |
1.5、background-size
background-size 属性规定背景图像的尺寸。
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
background-size : 100% 100% 与 cover 和 contain 区别。
100% 100% 图片宽度和高度的比例会被改变,填满盒子。
cover 图片宽度和高度比例不变,填满盒子,超出部分会被裁剪。
contain 图片宽度和高度比例不变,容器内至少有一张完整的图,容器留白区,铺不下的再裁掉。
1.6 background-clip
background-clip 属性规定背景的绘制区域。
值 | 说明 |
---|---|
border-box | 背景被裁剪到边框盒。(默认) |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容距框。 |
1.7 background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
1.5 background-color
background-color属性设置一个元素的背景颜色。
值 | 描述 |
---|---|
color | 指定背景颜色。 |
transparent | 指定背景颜色应该是透明的。这是默认 |