博客空间网页模板背景制作方法

2007-03-08

在决定制作博客空间网页模板背景的时候，首先要确保的是自己的博客空间是可以自己修改，设计或制作模板的，如Blogbus，Blogcn，本文以Blogbus为例介绍修改传统模板，也就是旧模板系统5种方法。如果有什么问题，请务必也留下你的回访地址喔~！ 新的模板系统我没有研究过，不太清楚怎么改。

首先请看〖修改模板前必须先……〗

1。颜色背景

以某种颜色为背景是最简单、常用的方法，在显示速度上占绝对优势。方法是在自定义模板的CSS里的“body {”下写

background-color: #6位数颜色代码;

注意（英文输入法的）分号不要掉啦。颜色代码是什么呢？看这里吧：颜色代码或者调色板

这种方法虽然简单，但是在色彩的选择和整体搭配上要做到协调美观就不是那么容易的事咯~选的不好，或者搭配不好就会很恶心的。

2。砂纹背景（图片的重复）

沙纹背景属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，也就是同一张图片在水平和竖直方向上的反复排列，在这类背景中以沙纹状的背景是为常见，所以统称为沙纹背景。

找一张小的图片，要注意的是当其反复排列成一个背景时要能成为一个整体。方法是在自定义模板的CSS里的“body {”下写

background-image: url(http://开头的图片的网址);
background-repeat:repeat;

注意（英文输入法的）分号不要掉啦。

如果是黑色的背景图片，特别是星空背景，建议在CSS里的“body {”下按第一种颜色背景的方法再加上“ background-color: #000000;”，颜色代码是6个零，即黑色。这里有一些模版背景的图片素材：黑色星空背景模版图片-黑夜和彩色背景模版、图片

3。条状背景（图片的重复）

条状背景与沙纹背景比较相似，不同的是它只让图片在一个方向上重复排列。以在竖直方向上排列为例，方法是在自定义模板的CSS里的“body {”下写

background-image: url(http://开头的图片的网址);
background-position: top center;
background-repeat: repeat-y;

注意（英文输入法的）分号不要掉啦。图片的大小要选取适当，尽量选宽一点的。

4。整图背景

这里所说的整图背景是指只用一整张大的图片作为背景，在拉动浏览器窗口的滚动条时，图片仍然位于页面的正中间而不随页面内容一起滚动。方法是在自定义模板的CSS里的“body {”下写

background-image: url(http://开头的图片的网址);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 50%;

如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"的值就可以了。

或者：background: url(http://开头的图片的网址) no-repeat top left fixed;

5。双重背景两层图

双重背景的意思是和新浪的模板背景相似，模版最底层铺一个背景，在这层背景的上面，即日志模块和侧边栏上再铺一层背景盖住。如图

方法是在自定义模板的CSS里的“body {”下写：

background-image: url(http://开头的图片的网址);
background-repeat:repeat;

在“#container {”下写：
width: 800px;
border-left: 1px solid #6位数颜色代码;
border-right: 1px solid #6位数颜色代码;
margin: 0 auto;
background-image: url(http://开头的图片的网址);
background-repeat:repeat;

注意（英文输入法的）分号不要掉啦。其中“width: ”后面的800是上面一层背景的宽度，可以自己修改，一般container下已经给了这个宽度；“border-left:”“ border-right:”分别是上面一层背景左右两侧的竖条分隔线，将上、下两层背景分开，所以这个也可以不要。

Tag: 收藏家BlogDesign

Kissdolphin @ 13:27:20 |╰♡记忆中那片泛泪的汪洋OnlyBeLoved | 收藏夹BlogDesign | Edit | ▲TOP

╰εїзﾟ Comments >>>

呵呵好强呢终于大概看懂一些如何弄咯
Kissdolphin 回复阿里迅说：
^o^
(2007-04-19 15:46:14)

阿里迅 | http://alisonlim.blogbus.com @ 2007-04-19 11:19:50 [回复]
觉得您的巴士可容量好大呢,不是每个巴士只有10MB的呢,我觉得好少哦,上传点图片就会填满了的,怎样才能使容量大点呢,真要升级为VIP才可吗?象您的通过一个ID有建立几个分站的是每个站点都10MB的容量还是全部一个ID只允许10MB的空间呢?如何才能充分利用巴士的平台资源共享呢,因为初乘巴士,挺多地方还不熟悉的,觉得您的站点很精良,所以希望能多借鉴学习,谢谢~
Kissdolphin 回复小小说：
每个BLOG都有10M的。
(2007-04-02 22:56:17)

小小 | @ 2007-04-02 15:09:04 [回复]
位图格式就是BMP的图象类型,为静态图,

因为贵网有不少素材是动态GIF的,但当使用图片另存为的保存方式时,图象显示的类型都为BMP的格式的,连一般的静态图JPG格式的另存为时也是显示BMP格式的呢,希望能把图象以图象原来的面貌存档使用的,如果活泼好动的GIF动态图变安静了的,会失色落寞不少哦~
Kissdolphin 回复小小说：
会这样吗？我没转换过格式啊，GIF的一直都是GIF啊，为什么你存了会变成BMP我就不清楚了。。。。
(2007-04-02 22:55:42)

小小 | @ 2007-04-02 14:45:49 [回复]
多谢指教,有受教许多,提供的素材也很可爱精致的,

有不少图片效果是想收藏运用的,但图片似乎保存的类型都是位图格式的,

贵网有不少是活泼灵动的图效的,这样就不能饱真的啦,觉得有些可惜,

如果可以,希望能保存收藏到完美全真的图片效果的,谢谢了~
Kissdolphin 回复小小说：
什么是位图格式啊？
(2007-03-31 00:45:47)

小小 | @ 2007-03-29 20:28:22 [回复]
忍不住转载了,谢谢呢~~

豆瓣猫 | @ 2007-03-25 13:19:49 [回复]
还有提个建议吧把那个跳出来的叫默林的家伙关了吧真讨厌
Kissdolphin 回复 stephanie 说：
我喜欢，拍死你~~~你那N久没更新了，都不知道你最近在干嘛？
(2007-03-20 10:29:54)

stephanie | @ 2007-03-19 16:10:39 [回复]
哈哈你也改不掉那个绿色的广告吧
Kissdolphin 回复 stephanie 说：
可以改掉，但是满复杂，我觉得没必要花那个精力，有时候那个BANNER还满好看的。
(2007-03-20 10:29:10)

stephanie | @ 2007-03-19 16:08:21 [回复]
想請教一下：

模板默認字體顏色代碼該如何修改呢？
Kissdolphin 回复 Diane 说：
http://dianebooboo.blogbus.com/logs/4803685.html
(2007-03-19 11:39:26)

Diane | http://dianebooboo.blogbus.com/ @ 2007-03-19 11:11:51 [回复]
厲害厲害！學到了好多*^-^*

Diane | http://dianebooboo.blogbus.com/ @ 2007-03-19 10:43:27 [回复]
厲害^_^！！！！

GC！

代元 | http://dsecho.blogbus.com/index.html @ 2007-03-17 23:28:43 [回复]
感谢分享^^

我转载到自己空间了...

也署了你BO的地址...

是想方便自己研究啦~~嘿嘿~~~

没关系吧?

不然我删掉也可以~汗~
Kissdolphin 回复 Bunny 说：
好的，没关系。以后我学会了更多更复杂的修改模版方法会不断更新这篇文章。
(2007-03-16 21:18:51)

Bunny | @ 2007-03-16 12:40:08 [回复]
真不错

电脑知识网

http://www.pczhishi.com

电脑知识网 | http://www.pczhishi.com @ 2007-03-12 20:47:56 [回复]
叶子超PL，然后居然会写模版哟，崇拜一下！

你在偶叶子上问偶素不素去得武汉的中山公园，答案是，非，偶去的是上海的中山公园。

嘎嘎！

过来看你！

西西！

银猫乐音 | http://princess.musique.blogbus.com/ @ 2007-03-09 11:32:05 [回复]
：D

iZ | @ 2007-03-09 09:27:27 [回复]
亲爱的，上两条评论是我复制的按照你说的方法改ＨＥＡＤＥＲ后的结果，结果我的模板没任何变化．我一直就对我模板里最上面的那种单调不满意．怎么搞的，能帮我看下吗？谢谢．
Kissdolphin 回复 benbenkitty 说：
你是想改掉最上面的那个图吗？你用的模版是OOPS对吧，是在CSS的#header {下面，把那张图换了就行。
(2007-03-08 22:54:10)

benbenkitty | @ 2007-03-08 21:44:40 [回复]
#header {

height: 100px;

overflow: hidden;

background-color: #D4D4D4;

background-image: url(http://dolphinothers2.blogbus.com/files/11731721242.jpg);

background-position: top left;

background-repeat: no-repeat;

}

benbenkitty | @ 2007-03-08 21:42:49 [回复]
body {

margin: 0px;

background-color: #FFFFFF;

background-image: url

(http://dolphinothers2.blogbus.com/files/11731721242.jpg);

background-repeat: no-repeat;

background-position: left top;

benbenkitty | @ 2007-03-08 21:42:16 [回复]
谢谢啦学会了

暖色瞳 | @ 2007-03-08 15:28:25 [回复]
请问你，我只想让文章随鼠标上下滚动，背景不动，要怎么做到呢？
Kissdolphin 回复暖色瞳说：
看第4个呀
(2007-03-08 13:50:02)

暖色瞳 | http://room-of-ivy.blogbus.com/ @ 2007-03-08 13:41:53 [回复]
评论分页：共3页第一页上一页 1 2 3