定义和用法
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; }
可能的值:
|
如果您仅规定了一个关键词,那么第二个值将是"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; }