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只能设置一个。

上一篇:hdu 1086(判断线段相交)


下一篇:使用windows live writer发表的博客