css background属性

定义和用法

background 简写属性在一个声明中设置所有的背景属性.

1.background-color:规定要使用的背景颜色。

   例：

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

 

2.backgroung-image：规定要使用的背景图像。

例：

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

3.background-repeat:设置是否及如何重复背景图像，定义了图像的平铺模式。

可能的值：

值 描述

repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

例：

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

 4.background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。

可能的值：

scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

例：如何设置固定的背景图像：

 

body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

 5.background-position:设置背景图像的起始位置。

 

例：如何定位背景图像：

 

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

 

可能的值:

top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。

6.background-origin:规定背景图片的定位区域。

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

语法：

 

 

background-origin: padding-box|border-box|content-box;

 例：

 

    相对于内容框来定位背景图像：

 

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

 

7. background-clip:规定背景的绘制区域。

语法：

 

background-clip: border-box|padding-box|content-box;

可能的值：

border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

例：

规定背景的绘制区域：

div
{
background-color:yellow;
background-clip:content-box;
border: 10px dotted #000000;
}