css3背景总结与解析

标签：

一、常用基本属性：

1. background-color：transparent || <color>        常用颜色格式有：颜色名、rgb、hls、十六进制、rgba、hlsa。
2. background-image：none || <url>     url可以是相对地址，可以是绝对地址。
3. background-repeat：repeat || repeat-x || repeat-y || no-repeat。
4. background-attachment：scroll || fixed。    默认值为scroll，表示图片随页面滚动。fixed表示页面固定，只能用于html或body标签上，使用在其它标签无效果。
5. background-position：<percentage> || <length> ||[left | center | right] [,top | center | bottom] 。当使用百分比时，应当是总宽/高度减去图片宽/高度加上padding值的和的百分比。

二、css3背景相关新增属性：

1. background-origin：padding-box || border-box || content-box。新版本浏览器语法。使用时需要加私有前缀。
   padding-box：默认值。决定background-position的起始位置从padding的外边缘开始。
   border-box：从border外边缘开始显示。
   content-box：从padding的内边缘，即content的外边缘开始显示。
2. background-clip：padding-box || border-box（默认值） || content-box。使用时需要加前缀
      在css2.1至css3中，背景在整个盒模型中，它布满整个元素的盒子区域，只不过边框部分遮住了部分background。
      当background-repeat为no-repeat时，background-color从边框的左上角起到边框的右下角止。而background-image却从padding的左上角到border的右下角。
      当background-repeat为repeat时，background-color完全被background-image覆盖。而background-image从border的左上角到border的右下角。但是background-position的起点是从padding的边缘开始。
   SP：在webkit内核下，background-clip还有一个text属性，配合webkit私有属性text-fill-color:transparent可以制作背景图片填充文字效果。
3. background-size：auto || length || percentage（根据元素宽度计算） || cover || contain（保持图像高宽比）
      在只取一个值的时候，第二个值相当于auto。
      background-size：cover配合background-position：center常用来制作满屏背景效果。

三、css的background可以设置多背景，用逗号隔开。background-color只能设置一个。

css3背景总结与解析

标签：

原文地址：http://www.cnblogs.com/wangkaiyuan/p/5779503.html