CSS3关于背景图片应用的总结

基本属性

background-color(背景颜色)

background-image(背景图片)

background-repeat(背景图片展示的方式)

background-attachment(背景图片滚动还是固定)

background-position(背景图片定位)

简写为：

background: background-color  background-image  background-repeat background-attachment  background-position

1、background-color属性

background-color:transparent || color

注意：默认是transparent，不设置颜色情况下是透明无色。color可以取颜色名、rgb颜色、hls值、十六进制颜色值、rgba颜色、hsla颜色值。

2、background-image属性

background-image:none || <url>
默认是none，<url>是图片路径

3、background-repeat属性

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

4、background-attachment属性

background-attachment：scroll ||  fixed

该属性取值为“fixed”时，一般运用在HTML或body标签上，其他标签达不到固定的效果

5、background-position属性，
用来设置背景图片的位置，默认值为(0,0)||(0%,0%)||(left,top)

新增的属性：

background-origin：绘制背景图片的起点。用来决定background-position属性的参考原点，决定背景图片的定位起点，默认情况下background-position以元素的左上角为起点。

background-origin：绘制背景图片的起点。用来决定background-position属性的参考原点，
决定背景图片的定位起点，默认情况下background-position以元素的左上角为起点。

background-size：指定背景图片的尺寸大小。

background-size：auto || <length> || <perentage> || cover || contain
auto ：默认值，保持背景图片的原始高度和宽度。
< length >：取具体的整数（px），改变图片的大小。
< perentage >:取百分值，百分值是相对于元素的宽度来进行计算。
cover：把图片放大，铺满整个容器。（可能导致图片失真）
contain：保持图片的本身宽高比例，把背景图片缩放到宽度或者高度正好的背景容器里面