TA的每日心情 | 开心 4 天前 |
---|
签到天数: 26 天 [LV.4]偶尔看看III
|
一、准备好背景图片,背景图片有两种:
1、用小图片平铺整个背景,比如某种花纹。
2、只用一张大图片做背景,比如节日图片。
二、上传图片
1、进入后台管理——界面——风格管理——编辑——编辑,设置图片在网站的保存目录,或者留空表示使用 static/image/common/ 目录,文件名不要冲突,如下图。
2、将图片上传到设置的目录中。
三、开始修改:
1、进入后台管理——界面——风格管理——编辑——编辑——背景——页面背景
2、填写图片名称(见下图),如果前几步没错,会在右侧显示效果。
3、最关键的一步是设置背景参数(见下图),如果平铺背景图片直接留空,主要参数含义如下。
A、背景重复方式:
repeat | 默认。背景图像将在垂直方向和水平方向重复。 | repeat-x | 背景图像将在水平方向重复。 | repeat-y | 背景图像将在垂直方向重复。 | no-repeat | 背景图像将仅显示一次。 | B、背景滚动方式:
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 | fixed | 当页面的其余部分滚动时,背景图像不会移动。 | C、背景图片X、Y点起始位置:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
| 如果您仅规定了一个关键词,那么第二个值将是"center"。
| x% y% | 左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
| xpos ypos | 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
| 这里举几个例子:
a、图片从左上角平铺:“repeat 0 0",因为默认值可省略,所以此时参数空白,效果也相同。
b、图片不平铺、水平居中:“no-repeat 50% 0%"
|
|