1. background-color: color | transparent
- color : color 设置背景的颜色,它可以采用英文单词、 十大进制、RGB、 HSL、HSLA 和 RGBA。
- transparent: 表示透明。
2. background-image: none | url (url)
- none : 无图片背景。
- url (url): 使用绝对或相对地址指定背景图像。不仅可以输入本地图像文件的路径和文件名称,也可以用 URL 的形式输入其他网站位置的图像背景。
页面中可以用 JPG 或者 GIF 图片作为背景图,这与向网页中插入图片不同,背景图像放在网页的最底层,文字和图片等都位于其上。
3. background_repeat: inherit | no_repeat | repeat | repeat_x | repeat_y
- inherit: 从父元素继承 background_repeat 属性的设置。
- no-repeat: 背景图像只显示一次,不重复。
- repeat: 在水平和重直方向上重复显示背景图像。
- repeat-x: 只沿 x 轴水平方向重复显示背景图像。
- repeat-y: 只沿 y 轴垂直方向重复显示背景图像。
4. background-attachment: scroll | fixed
- scroll: 当页面滚动时,背景图像跟着页面一起滚动。
- fixed: 将背景图像固定在页面的可见区域。
5. background-position: length | percentage | top | center | bottom | left | right
- length: 设置背景图像与页面边距水平和垂直方向的距离,单位为 cm、mm、px 等
- percentage: 根据页面元素框的宽度和高度的百分比放置背最图像。
- top: 设置背层图像顶部居中显示。
- center: 设置背景图像居中显示。
- bottom: 设置背景图像底部居中显示。
- left: 设置背景图像左部居中显示。
- right: 设置背景图像右部居中显示.
6. 指定背景的显示范围——background-clip
background-clip 属性的语法格式如下:
background-clip: border-box | padding-box | content-box | text
- border-box: 从 border 区域(不含border) 开始向外裁剪背景。
- padding-box: 从 padding 区域(不含padding) 开始向外裁剪背景。
- content-box: 从 content 区域开始向外裁剪背景。
- text: 从前景内容的形状 ( 如文字 ) 作为裁剪区域向外裁前。使用该属性值可以实现使用背景作为填充色之类的遮罩效果。
7. 指定背景图像的起点——background-origin
background-origin 属性的语法格式如下:
background-origin: border-box | padding-box | content-box
- border-box: 从 border 区域 (含 border ) 开始显示背景图像;
- padding-box: 从 padding 区域 (含 padding ) 开始显示背景图像:
- content-box: 从 content 区域开始显示背景图像:
8. 指定背景图像的尺寸——background-size
background-size 属性的语法格式如下
background-size: [ <length> | <percentage> | auto ] | cover | contain
- <length>: 由浮点数字和单位标识符组成的长度值,不可为负值。该参数可以设置一个值,也可以设置两个值,如果只设置一个值,那么为宽度值,图像将进行等比例缩放,否则分别为宽度值和高度值。
- <percentage>: 取值为 0% 到 100% 之间的值,不可为负值。该参教可以设置一个值,也可以设置两个值,如果只设置一个值,那么为宽度的百分比,图像将进行等比例缩放,否则分别为宽度的百分比和高度的百分比。
- auto: 背景图像的原始尺寸。
- cover: 将背最图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
- contain: 将背景图像等比缩放到宽度成高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
9. 多背景图片
实际上,CSS3 并没有为实现多背最图片提供对应的属性,而是通过为 background-image、background-repeat、background-position、background-size 等属性提供多个属性值(各个属性值之间以英文逗号分隔)来实现。缩写示例:
background: #fff url(img.png) no-repeat fixed 0 0 ;