CSS背景属性

CSS背景属性

1、background-attachment 属性

　　scroll：默认值。背景图像会随着页面其余部分的滚动而移动。

　　fixed：当页面的其余部分滚动时，背景图像不会移动。

　　inherit：规定应该从父元素继承 background-attachment 属性的设置。

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

2、background-clip 属性

　　border-box：背景被裁剪到边框盒。

　　padding-box：背景被裁剪到内边距框。

　　content-box：背景被裁剪到内容框。

div
{
background-color:yellow;
background-clip:content-box;
}

3、background-origin 属性

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

　　padding-box：背景图像相对于内边距框来定位。

　　content-box：背景图像相对于内容框来定位。

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

4、background-size 属性

　　length
　　设置背景图像的高度和宽度。
　　第一个值设置宽度，第二个值设置高度。
　　如果只设置一个值，则第二个值会被设置为 "auto"。
　　percentage
　　以父元素的百分比来设置背景图像的宽度和高度。
　　第一个值设置宽度，第二个值设置高度。
　　如果只设置一个值，则第二个值会被设置为 "auto"。
　　cover
　　把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
　　背景图像的某些部分也许无法显示在背景定位区域中。
　　contain

　　把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

例子1：

width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: border-box;
background-origin: border-box;
background-size: 100%;

如图：

例子2：

width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: padding-box;
background-origin: content-box;
background-size: 100%;

如图：

如果 background-attachment 设置了 fixed 属性，则设置 background-origin 无效果。