background-color
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
transparent | 默认。背景颜色为透明。 |
inherit | 规定应该从父元素继承 background-color 属性的设置。 |
background-image
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(/i/eg_bg_04.gif);}背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
背景定位
- 通过关键字定位:top、bottom、left、right 和 center。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
也就是说,如果只声明一个方向的位置(如水平为left),那么默认另一个方向为center(也就是说垂直方向为居中,总体靠左居中)。
- 按照百分数值来定位
百分数值同时应用于元素和图像。
比如设置百分比为30%,20%,那么将是让背景图片的(30%,20%)处的点与元素的(30%,20%)的点对应照齐。
看示例:如何使用%来定位背景图像
效果如图:
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
- 长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
现在有一种情况,如果把数值设置为负的话,能怎么样呢?
比如设置为:-50px -50px,这样背景将会以 元素的左上角为参考点,向左和上分别移动50像素,这样背景将会超出元素一部分,那么超出的部分就不会显示了。
背景关联
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
示例:设置固定的背景图像
background的这些参数都可以在设置在一个声明之中如:
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
CSS3 background-clip 属性
规定背景的绘制区域:
div
{
background-color:yellow;
background-clip:content-box;
}
值 | 描述 | 测试 |
---|---|---|
border-box | 背景被裁剪到边框盒。默认 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |