图解css3之背景

1.背景的基本属性

background-color

backgroud-image:none | url()

backgroud-repeat:no-repeat | repeat-x | repeat-y | repeat

background-attachment:scroll | fixed(设置背景图片是否固定或者随着页面的其余部分滚动)

background-position:% || length(设置背景图片的位置)

eg:background-position:top center;(背景图片的顶边中心点和元素的顶边中心吻合)

2.css3中增加的属性

(加前缀)backgound-origin:padding-box | borde-box((默认值) | content-box

eg：padding:10px;border:10px

border-box效果：

padding-box效果:

content-box效果:

backgroud-clip:取值同kgound-origin(表示裁剪背景图片)

border-box:裁剪范围在边框以内

padding-box:裁剪范围在内距以内

content-box:裁剪范围在内容以内

text:剪的图片用来填充文字

backgound-size:auto(图片本身的大小) | 宽度  高度 | cover(背景图片按比例放大来填充容器) | contain(图片缩小到宽度或者高度正好适应容器的宽度或者高度）

backgroudz支持多背景（一一对应，其他属性类似）:

eg: