首页 > 代码库 > background属性详解

background属性详解

background是个常用的属性,包含background-color,background-image,background-attachment,background-size,background-repeat,background-origin,background-clip,background-position。。。。,着实有点长。

     1.background-color:背景色,没啥好说
     2.background-image:背景图片,通过url()引用,同样没啥
     3.background-attachment:设置背景图片是否随页面其他部分滚动,有fixed(不随其他部分滚动),scroll(默认,随其他部分滚动),inherit(从父元素继承background-attachment属性的设置)
     4.background-size:设置图片的大小,有length(设置宽度和高度,如20px,20px),percentage(设置宽度和高度的百分比,10%,20%),cover(覆盖整个背景区域),contain(将图片宽高等比例扩大尽量占满整个背景区域)
     5.background-repeat: 定义图片重复的方式,有repeat(默认,图片在水平和垂直方向重复),repeat-x(背景图像在水平方向重复),repeat-y(背景图像在垂直方向重复),no-repeat(背景图像仅显示原来的大小),inherit(从父元素继承)
  6.background-origin:规定background-position相对于什么位置来定位,有padding-box(相对于内边框来定位),border-box(相对于边框盒来定位),content-box(相对于内容框来定位)。特别注意:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
  7.background-clip:规定背景的绘制区域,有border-box(包含border在内的所有内容),padding-box(包含padding和content),content-box(只包含content)

  8.background-position:设置背景图像的起始位置。取值有

  (1)用关键词设置,若只设置了一个值第二个默认为center。第一个值为距离顶部位置,第二个值为距左边位置。默认为0%,0%

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

  (2)用百分比设置,若第二个值未设置默认为50%.第一个值为水平位置,第二个为垂直位置

  x% y%

  (3)用具体的值设置,如20px等css单位。值的意义同上

  xpos ypos

background属性详解