CSS背景

设置网页中某元素的背景

背景属性

背景颜色

语法

background-color：<color>

注意事项

1. 设置或检索对象的背景颜色。
2. 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。
3. 如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
4. 对应的脚本特性为backgroundColor。

背景图像

语法

background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none

注意事项

1. 如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
2. 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
3. 对应的脚本特性为backgroundImage。

背景平铺

语法

background-repeat：<repeat-style> [ , <repeat-style> ]*
<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}

注意事项

1. 必须先指定 <' background-image '> 属性。
2. 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
3. 如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
4. 对应的脚本特性为backgroundRepeat。

背景固定

语法

background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | scroll | local

取值

fixed

背景图像相对于窗体固定。

scroll

背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

local

背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

背景位置

语法

background-position：<position> [ , <position> ]*

注意事项

1. 该属性提供2个参数值（CSS3中已允许提供3，4个值）。
2. 如果提供三或四个，每个或偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
3. 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
4. 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
5. 对应的脚本特性为backgroundPosition。