CSS背景属性一览
background-attachment
- 解释:背景图像是否固定或者随着页面的其余部分滚动。
- 取值:
- scroll:默认值;背景图像会随着页面其余部分的滚动而移动。
- fixed:当页面的其余部分滚动时，背景图像不会移动。
- inherit:规定应该从父元素继承 background-attachment 属性的设置。
- 代码
- 效果
background-color
- 解释:设置元素的背景颜色。
- 取值:
- color_name:规定颜色值为颜色名称的背景颜色（比如 red）。
- hex_number:规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
- rgb_number:规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
- transparent 默认。背景颜色为透明。
- inherit 规定应该从父元素继承 background-color 属性的设置。
background-image
- 解释:把图像设置为背景。
- 取值:
- url('URL'):指向图像的路径。
- none:默认值。不显示背景图像。
- inherit:规定应该从父元素继承 background-image 属性的设置。
background-position
- 解释:设置背景图像的起始位置。
- 取值:
- 位置描述:top/right/bottom/left
- 百分比:50%/50%
- xpos ypos:水平/垂直位置
background-repeat
- 解释:设置背景图像是否及如何重复。
- 取值:
- repeat:默认;背景图像将在垂直方向和水平方向重复。
- repeat-x:背景图像将在水平方向重复。
- repeat-y:背景图像将在垂直方向重复。
- no-repeat:背景图像将仅显示一次。
- inherit:规定应该从父元素继承 background-repeat 属性的设置。
background-clip
- 注意点:这个属性一般用来控制background-color控制background-image不好使
- 解释:规定背景的绘制区域。
- 取值:
- border-box:背景被裁剪到边框盒。
- padding-box:背景被裁剪到内边距框。
- content-box:背景被裁剪到内容框。
- 代码:content-box
- 效果
- 代码:padding-box
- 效果
- 代码:border-box
- 效果
background-origin
- 注意点:这个属性一般用来控制background-image控制background-color不好使
- 解释:规定背景图片的定位区域。
- 取值:
- border-box:背景图像相对于边框盒来定位。
- padding-box:背景图像相对于边框盒来定位。
- content-box:背景图像相对于内容框来定位。
- 代码:content-box
- 效果
- 代码:padding-box
- 效果
- 代码:border-box
- 效果
background-size
- 解释:规定背景图片的尺寸。
- 取值:
- length:设置背景图像的高度和宽度;第一个值设置宽度，第二个值设置高度;如果只设置一个值，则第二个值会被设置为 "auto"。
- percentage:以父元素的百分比来设置背景图像的宽度和高度;第一个值设置宽度，第二个值设置高度;如果只设置一个值，则第二个值会被设置为 "auto"。
- cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
- contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
