CSS 属性定义背景效果：【也是简写的属性顺序】 * background-color * background-image * background-repeat * background-attachment * background-position ## 背景颜色 body {background-color:#b0c4de;} CSS中，颜色值通常以以下方式定义: * 十六进制 - 如："#ff0000" * RGB - 如："rgb(255,0,0)" * 颜色名称 - 如："red" ## 背景图像 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. body {background-image:url('paper.gif');} ## 背景图像 - 水平或垂直平铺 | 值 | 说明 | | :-- | :-- | | repeat | 背景图像将向垂直和水平方向重复。这是默认 | | repeat-x | 只有水平位置会重复背景图像 | | repeat-y | 只有垂直位置会重复背景图像 | | no-repeat | background-image不会重复 | | inherit | 指定background-repea属性设置应该从父元素继承 | ## 背景图像位置 background-position 属性改变图像在背景中的位置 | 单一关键字 | 等价的关键字 | | --- | --- | | center | center center | | top | top center 或 center top | | bottom | bottom center 或 center bottom | | right | right center 或 center right | | left | left center 或 center left | background-position属性的几种写法： 1. `background-position:top;` 2. `background-position:50% 50%;` 【百分数值居中】 `background-position:66% 33%;` 【图像放在水平方向 2/3、垂直方向 1/3 处】 3. `background-position:50px 100px;` 【长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上】 ## background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 | 值 | 说明 | | :-- | :-- | | scroll | 背景图片随页面的其余部分滚动。这是默认 | | fixed | 背景图像是固定的 | | inherit | 指定background-attachment的设置应该从父元素继承 | | local | 背景图片随滚动元素滚动 | ***** 实例： body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; }