1.background-color
background-color属性:设置元素的背景颜色
2.background-position
background-position属性:设置背景图像的起始位置,需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
常用属性:
- top
- left
- bottom
- right
3.background-size
background-size属性:设置背景图像的尺寸
常用属性:
px:参数1是宽,参数二是高
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。可能导致部分无法显示
contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
4. background-repeat
background-repeat属性:定义了图像的平铺模式
常用属性:
repeat:默认。背景图像将在垂直方向和水平方向重复。
repeat-x:背景图像将在水平方向重复。
repeat-y:背景图像将在垂直方向重复。
no-repeat:背景图像将仅显示一次。
5. background-origin
background-origin属性:规定 background-position 属性相对于什么位置来定位。
常用属性:
padding-box:背景图像相对于内边距框来定位。
border-box:背景图像相对于边框盒来定位。
content-box:背景图像相对于内容框来定位
6.background-clip
background-clip属性:规定背景的绘制区域
常用属性:
border-box:背景被裁剪到边框盒。
padding-box:背景被裁剪到内边距框。
content-box:背景被裁剪到内容框。
7.background-attachment
background-attachment属性:设置背景图像是否固定或者随着页面的其余部分滚动。
常用属性:
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不移动。
8.background-image
background-image属性:为元素设置背景图像。
常用属性:
url('URL') 指向图像的路径。
9.background属性:
background属性:在一个声明中设置所有背景属性
例子:background: #00FF00 url(bgimage.gif) no-repeat fixed top;
属性说明:
- background-color 设置元素的背景颜色
- background-position 设置背景图像的起始位置
- background-size 设置背景图像的尺寸
- background-repeat 定义了图像的平铺模式
- background-origin 规定 background-position 属性相对于什么位置来定位。
- background-clip 规定背景的绘制区域
- background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
- background-image 为元素设置背景图像。