CSS background 属性

background 给元素添加背景属性, 是一个简写属性, 在一个声明中设置所有的背景属性。

简写 

div { 
  background: skyblue url(bgimage.gif) no-repeat fixed top;
  }

所有浏览器都支持 background 属性 且不可继承。

IE8 以及以下的浏览器不支持一个元素多设置个背景图像。

可以设置如下属性：

background-color           //设置元素的背景色。
background-repeat          //设置背景图像是否平铺
background-attachment      //背景图像是否固定或者随着页面的其余部分滚动。
background-image           //设置背景图像。
background-origin          //设置背景图片的定位区域。
background-clip            //设置背景的绘制区域。
background-position        //设置背景图像的位置。
background-size            //设置背景图片的尺寸。

  background-color

元素的背景颜色取值和  color 类似  

 可以用以 # 开头的16进制颜色码  #FFB6C1   表示 也可用英文颜色单词关键字 red black  表示 还个用 CSS3中的新特性 rgba(255,255,0)  来表示 ;

如:

div {
  background:#FFF;   
}

 

background-image

要把图像放入背景，属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

如:

div { 
background-image: url("图像的路径"); // ./ 为当前路径    ./../为上一层路径 
}

background-position

背景图像的位置 有两个参数 第一个参数为横轴X  ,第二个参数为 纵轴Y 

提供以下3类取值: 

1. 关键字:  top、bottom、left、right 和 center。
2. 长度值:  100px, 5cm,1 rem,1pt 等。
3. 使用百分数值 :50% ,20% 等。

    关键字 

通常成对出现  默认为 left top ;

如:

div
  { 
　　background-image:url("ssss");
    background-repeat:no-repeat;
    background-position:right bottom; //使图像放置在元素内边距区的右下角。 如果只写一个参数, 那么第二个参数默认为center。
  }

  长度值

元素内边距区左上角的偏移,偏移点是图像的左上角。

如:  

div
  { 
　　background-image:url("ssss");
    background-repeat:no-repeat;
    background-position:right bottom; //图像的左上角将在元素内边距区左上角向右 100 像素、向下 100 像素的位置上。

}

百分数值

适当放置图像  

如:

body
  { 
    background-image:url('ssss');
    background-repeat:no-repeat;
    background-position:50% 50%; //使图像中心点和元素中心点对齐居中 如果只写一个参数,那么第二个参数默认 50%

 }

background-repeat

在页面上对背景图像进行平铺

提供有以下4种值:

1. repeat-x :图像只在水平方向上重复
2. repeat-y :图像只在垂直方向上重复
3. no-repeat: 不允许图像在任何方向上平铺
4. 默认任何方向上平铺

如:

div
  { 
  background-image: url("sss");
  background-repeat: repeat-x; //图像只在水平方向平铺
  }

background-attachment

只提供2种值:

属性的默认值是 scroll，在默认的情况下，背景会随文档滚动。

fixed  防止这种滚动,不会受到滚动的影响

如:

div
  {
  background-image:url("sss");
  background-repeat:no-repeat;
  background-attachment:fixed //固定图像
  }

CSS3  背景新特性

background-size

设置背景图像的高度和宽度 第一个参数为 图像宽度,第二个为图像高度 可能会使图像拉伸变形。

提供以下四种取值:

1. 长度值: px  , pt 等
2. 百分数值: 30% 30%
3. cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域, 背景图像的某些部分也许无法显示在背景定位区域中 。
4. contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 。

如:

div
{
background-image:url("sss");
background-repeat:no-repeat;
background-size:cover; //完全覆盖背景区域
}

background-origin

 属性规定 background-position 属性相对于什么位置来定位。

 如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

 提供的值有:

1.    padding-box :背景图像相对于内边距来定位。

2. border-box :背景图像相对于边框盒来定位。

3. content-box :背景图像相对于内容来定位。
   

  如:

div
{
padding:20px;
border:20px dotted red;
background-image:url("sss");
background-origin:padding-box; //相对于内边距来定位
background-repeat:no-repeat;
}

background-clip

  图像裁剪区域

提供的值和origin 属性类似 请参考 background-origin

 可配合 size 和 position 属性使用