web前端基础：CSS背景样式

背景样式
• 设置元素的背景颜色
• 设置元素的背景图片
• background-color 设置元素的背景颜色。
• background-image 把图像设置为背景。
• background-position 设置背景图像的起始位置。
• background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
• background-repeat 设置背景图像是否重复及如何重复。
• background 简写属性，作用是将背景属性设置在一个声明中。

背景颜色
设置元素的背景颜色

background-color: 颜色｜ transparent

说明
• transparent是全透明黑色(black)的速记法，类似rgba(0,0,0,0)这样的值。
• 颜色值（颜色名｜RGB｜十六进制｜）
• 背景区包括内容、内边距（padding）和边框、不包含外边距（margin）

背景图片
设置元素的背景图片

background-image : URL｜ none

说明
• url地址可以是相对地址也可以是绝对地址
• 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
• 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复

背景图片重复
设置元素的背景图片的重复方式

background-repeat: repeat ｜ no-repeat   |   repeat-x ｜repeat-y

background-repeat
repeat ：默认值，背景图片水平方向和垂直方向重复
repeat-x：背景图片水平方向重复
repeat-y : 背景图片垂直方向重复
no-repeat : 背景图片不重复

背景图片显示方式
设置元素的背景图片的显示方式

background-attachment: scroll ｜fixed

说明：
scroll ：默认值，背景图片随滚动条滚动
fixed ：当页面的其余部分滚动时，背景图片不会移动

背景图片定位
设置元素的背景图片的起始位置

background-position : 百分比 ｜值  |  top ｜right ｜ bottom ｜ left ｜center

background-position

值	说明	注意
长度值（x y	第一个值水平位置，第二个值垂直位置左上角0 0	只写一个参数的话，第二个默认为居中
百分比（x% y%）	第一个值水平位置的百分比，第二个值垂直位置的百分比左上角0% 0%，有下角100% 100%，如果仅规定了一个值，另一个值将是 50%。	只写一个参数的话，第二个默认为居中
top	顶部显示，相当于垂直方向0	只写一个参数的话，第二个默认为居中
right	右边显示，相当于水平方向100%	只写一个参数的话，第二个默认为居中
left	左边显示，相当于水平方向0	只写一个参数的话，第二个默认为居中
bottom	底部显示，相当于垂直方向100%	只写一个参数的话，第二个默认为居中
center	居中显示，相当于水平方向50%垂直方向50%	水平、垂直方向都居中

背景缩写
background：[background-color] [background-image]
[background-repeat]
[background-attachment]
[background-position] []
说明
• 各值之间用空格分割 ，不分先后顺序