background-color
设置元素的背景色。
元素背景的范围:
会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
可能的值:
1. color_name(比如 red)。
2.hex_number(比如 #ff0000)。
3. rgb_number(比如 rgb(255,0,0))。
4. transparent 默认。背景颜色为透明。
5. inherit 继承父元素设置的 background-color 属性。
body {
background-color: red;
}
background-image
设置元素背景图片。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
元素背景的范围:
会填充元素的内容、内边距和边框区域,但不包括外边距。
可能的值:
1. background-image:url('URL') 指向图像的路径。
2. background-image:none 默认值。不显示背景图像。
3. background-image:inherit 从父元素继承 background-image 属性。
如下用法:
body {
background-image: url("paper.gif");
}
background-position
设置背景图像的起始位置。
这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
background-position: 水平位置 垂直位置;
background-repeat
设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
可能的值:
1. background-repeat: repeat; 默认。背景图像将在垂直方向和水平方向重复。
2. background-repeat: repeat-x; 背景图像将在水平方向重复。
3. background-repeat: repeat-y; 背景图像将在垂直方向重复。
4. background-repeat: no-repeat; 背景图像将仅显示一次。
5. background-repeat: inherit; 规定应该从父元素继承 background-repeat 属性的设置。
background-size
设置背景图像的尺寸。
可能的值:
1. length
第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
2. percentage
以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值,则第二个值会被设置为 "auto"。
3. cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4. contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。