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

2007-03-08

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

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

http://dolphin01.blogbus.com/files/1169830649.gif1。颜色背景http://dolphin01.blogbus.com/files/1169830697.gifhttp://dolphin01.blogbus.com/files/1169830697.gifhttp://dolphin01.blogbus.com/files/1169830697.gif

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

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

注意(英文输入法的)分号不要掉啦。颜色代码是什么呢?看这里吧:颜色代码或者 调色板

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

点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169830754.gif2。砂纹背景(图片的重复)http://dolphin01.blogbus.com/files/1169830743.gifhttp://dolphin01.blogbus.com/files/1169830743.gifhttp://dolphin01.blogbus.com/files/1169830743.gif

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

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

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

注意(英文输入法的)分号不要掉啦。

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

点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169831772.gif3。条状背景(图片的重复)http://dolphin01.blogbus.com/files/1169831788.gifhttp://dolphin01.blogbus.com/files/1169831788.gifhttp://dolphin01.blogbus.com/files/1169831772.gif

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

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

注意(英文输入法的)分号不要掉啦。图片的大小要选取适当,尽量选宽一点的。点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169831594.gif4。整图背景http://dolphin01.blogbus.com/files/1169831594.gifhttp://dolphin01.blogbus.com/files/1169831594.gif

这里所说的整图背景是指只用一整张大的图片作为背景,在拉动浏览器窗口的滚动条时,图片仍然位于页面的正中间而不随页面内容一起滚动。方法是在自定义模板的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; 

点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169831463.gif5。双重背景两层图http://dolphin01.blogbus.com/files/1169831474.gifhttp://dolphin01.blogbus.com/files/1169831490.gif

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

方法是在自定义模板的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:”分别是上面一层背景左右两侧的竖条分隔线,将上、下两层背景分开,所以这个也可以不要。

忆瀞原创Creative Commons License本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 许可协议进行许可。如需转载,请先点击阅读,并做好出处链接.╰εїз゚忆瀞忆境






╰εїз゚ Comments >>>

  • 不是太明白,先收藏,我刚学会做横条的背景,竖条和小块的、大张的都还没试过呢,关键是太懂代码,只会简单的操作。

    谢谢!
    Kissdolphin 回复 灵芝姐姐 说:
    加油了~
    (2009-10-20 19:57:01)
    灵芝姐姐 | http://lzjj.ok.blog.163.com/edit/ @ 2009-07-21 08:26:46     [回复]
  • 我想做个类似的,要有动态流星雨的,还要有个会说话的星星,你是很乐于助人的,是把,麻烦回到我邮箱,三Ky
    Kissdolphin 回复 Fretely 说:
    会说话的星星。。。。好难喔,我也不会。。。。
    (2009-08-12 13:26:53)
    Fretely | http://ufo.op.blog.163.com @ 2009-06-26 11:36:20     [回复]
  • 我找了一幅图片按照这里教的方法改了 可是还是显示之前的模板 这是怎么回事呢?http://tea-mo-chen.blogbus.com
    Kissdolphin 回复 冷月孤星 说:
    请问你用的是新模板还是旧模板啊,修改的模板是不是就是正在使用的模板呢?
    (2008-11-24 00:31:49)
    冷月孤星 | http://tea-mo-chen.blogbus.com/ @ 2008-11-07 01:09:50     [回复]
  • 重新设置了一下,避免了那个问题,不过,背景颜色总是换不起来,很奇怪啊
    想要#D8D8BF 做背景,但是怎么改它都是白色的~

    谢谢~
    Kissdolphin 回复 泽安 说:
    新模板我也没研究过哦,如果是旧模板我就可以帮到你了~
    (2008-08-13 19:41:50)
    泽安 | http://zanngreen.blogbus.com/ @ 2008-08-12 13:52:40     [回复]
  • 试着做了一下,不知道我弄错了哪里,博客的名字变成了{# blogname} 这算Header? 怎么变回去呢?拜求~
    谢谢姐姐了~
    Kissdolphin 回复 泽安 说:
    blogname只是博客名字这块,header是包括博客名,博客简介,置顶图片等整个顶部那一块。
    (2008-08-29 14:50:34)
    泽安 | http://zanngreen.blogbus.com/ @ 2008-08-12 13:09:28     [回复]
  • 请问 原模版没有头顶图片的.
    怎么添加头顶图片阿..

    还有还有。.
    那个播放器..怎么弄阿??
    Kissdolphin 回复 cici-yao 说:
    头顶图片你已经加好了,那我就说说播放器吧~
    大致有2种方法,都是想到哪就放哪,一种是用代码添加,代码见我侧边栏的收藏夹里有个特效代码类,点进去找添加音频的代码,把音乐地址加进去就行了,这个的好处就是可以隐藏播放器,还有就是如果要换歌曲的话,也不用那么麻烦还要登陆播放器网站更换,不过只能播放一首歌。二是注册播放器网站,这个在百度上可以搜到很多,还是我那个收藏夹的下面有介绍几个播放器的网站,登陆后跟着步骤来,最后把代码放进博客里就行了。
    (2008-08-11 21:38:25)
    cici-yao | http://ciciyaoyao.blogbus.com/ @ 2008-08-11 01:08:20     [回复]
  • 韩国新网的怎做?
    sanshai | @ 2008-05-18 20:35:01     [回复]
  • 为什么不行啊 ,我快风了啊!!!就一个模版可以啊,为什么得不到我想要的啊 !!!快快告诉我,谢谢!!
    Kissdolphin 回复 千天圣 说:
    因为你用的是新模板系统喔!
    (2008-05-06 14:35:47)
    千天圣 | http://tianben.blogbus.com/ @ 2008-05-05 18:26:00     [回复]
  • 还是谢谢你了。^^
    一。 | @ 2008-05-05 12:47:49     [回复]
  • 请问一下我的版头为什么不能显示正常大小呢。

    我用的是ATTITUDE CAMERA
    Kissdolphin 回复 一。 说:
    我写的是修改旧模板的方法哦,新的模板我没有研究过,不太清楚怎么改,很头疼~~~~
    (2008-05-05 11:26:04)
    一。 | http://sweetdream01.blogbus.com @ 2008-05-02 19:14:42     [回复]
  • 偶然发现你的博。
    试了。真有用。
    呵呵。细心有才气的女子。我喜欢。
    Kissdolphin 回复 dracula. 说:
    Thank you!
    (2008-04-15 19:37:50)
    dracula. | @ 2008-04-14 17:49:42     [回复]
  • 你好,我很笨,对这些是一窍不通。能给我个完整的代码吗?我直接复制就好了。呵呵....
    tian | http://xietian629.blogbus.com/ @ 2008-03-29 03:58:02     [回复]
  • 你好,博客很漂亮。
    想请问一下,你的模板最上面的那图片地址是什么,很喜欢。谢谢!
    junjun | @ 2008-03-28 17:40:47     [回复]
  • 。親.實在是研究了狠多下都沒找到門路.火=_=||
    。我想弄成像我新浪那種效果http://blog.sina.com.cn/yaozaizai
    。但試了幾款模板都沒找到該改哪.
    。覺得親這款模板的背景好看.但不知道最頂上那圖片該在哪改.
    。找了狠久沒找到.要抓狂喇..$_$
    。親可以幫我看看我要的效果應該選哪款模板還有該改哪不..
    。謝謝噠..無限感激德TAT
    Ivy_h | http://bonnieh-he.blogbus.com/ @ 2008-03-06 19:24:47     [回复]
  • 。親會做板子八~
    話說在大巴裏很少有滿意德模板~
    。親能告知些許技巧不~
    先謝過噠~=_=++
    Kissdolphin 回复 Ivy_h 说:
    技巧就是一点一点地改。。。。。。呵呵
    (2008-03-05 23:35:17)
    Ivy_h | http://bonnieh-he.blogbus.com/ @ 2008-03-05 18:21:41     [回复]
  • 刚刚地址错了.呵呵
    lee | http://lisiyue.blogbus.com @ 2008-02-11 17:39:38     [回复]
  • 谢谢你的教材噢..让我初步了解代码了..
    lee | http://www.lisiyue.blogbus.com @ 2008-02-11 17:37:19     [回复]
  • 我的横幅怎么也换不了。。。我按你说的,把图片地址换了。。。怎么还不行啊。。。麻烦你帮我解答一下,谢谢谢谢啦~~~~~~
    R.*world | @ 2008-02-06 01:25:49     [回复]
  • 你好!
      我想问一下你这个博的背景,就是白色底上面有淡灰色暗花纹的这个背景是怎么弄的?我也想改成这样,不知道怎么找图片呢-.- 还请赐教啊!!!:>
    wbbloveforever | http://wbbloveforever.blogbus.com @ 2008-02-04 15:51:32     [回复]
  • 亲爱的 怎么弄的??我想学
    我就是我 | @ 2008-02-02 21:27:53     [回复]
  • 姐姐。你的THEME COVER是怎么做的啊
    我也想弄一个类似的。可以在那个页面显示出留言板的

    还有。就是我的博的日志评论那里左边对不齐该怎么弄
    Kissdolphin 回复 小铁 说:
    留言板在BUS论坛里有人教了个比较简单的做法,你可以看看。日志评论那里是那样的,因为标点符号和字所占的空间大小不一样,只能左对齐,没办法两端对齐的。
    (2007-11-25 11:24:29)
    小铁 | http://loveforshin.blogbus.com @ 2007-11-25 00:49:26     [回复]
  • 啊 ~~~
    笨笨 | http://梦幻家园 @ 2007-11-22 22:33:27     [回复]
  • CSS里的body是什么意思不明白请指教一点谢谢拉11111不会
    Kissdolphin 回复 王华 说:
    这个要进入旧模板里.
    (2007-11-14 21:38:01)
    王华 | http://wanghua198765 @ 2007-11-13 03:16:59     [回复]
  • bangbang我!怎么播放器里的音乐没动静阿 阿?55555555555
    Kissdolphin 回复 谢谢 说:
    原因很多,缓冲慢了,网速慢了,代码不对,地址不对,文件有防盗链,地址已经删除等……
    (2007-11-03 23:31:25)
    谢谢 | http://blog.sina.com.cn/hrbcuiwen @ 2007-11-03 22:56:30     [回复]
  • 为什么我的背景音乐不响呢?http://blog.sina.com.cn/hrbcuiwen
    学生 | @ 2007-11-03 22:41:10     [回复]
  • 你好,第一次来你的BLOG觉得做得很不错。我有个一问题想请教,以前在CSS模块里面更换背景图片还有头顶得图拼都能更换。但是发现现在改变了图片地址后浏览显示不出图片了,找不出原因。请问问什么呢?
    谢谢指教~
    Kissdolphin 回复 harukachen 说:
    你的博客很可爱啊!这个原因有好几个,最常见的就是图片地址不对,或者有防盗链,你图片是上传到自己的BUS了吗?
    (2007-10-23 12:20:26)
    harukachen | http://harukazone.blogbus.com @ 2007-10-22 11:55:05     [回复]
  • css 在哪啊``?

    我怎么找不到呢`

    怎么样整好空间背景 | @ 2007-09-16 09:19:06     [回复]
  • 恩,我也发觉了,但我自己真的没有能力去改上面的摸板块,,,补救措施是把摸板控制在1个818P的整体色块里,以达到统一效果就好了...哈,我已经很满意了,,,谢谢你,问候你.快乐!!!
    treeF | @ 2007-09-13 16:27:22     [回复]
  • 我按你这样的方法做双重背景两层图:

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

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

    background-repeat:repeat;



    在“#container {”下写:

    width: 800px;

    margin: 0 auto;

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

    background-repeat:repeat;

    .........................................



    结果出来的效果只有窄窄的1条黑色 背景.

    似乎需要3层背景???

    麻烦你再帮我看看吧.....

    谢谢!!
    Kissdolphin 回复 treeF 说:
    你选的这个模板如果要保留原来的日志模块的样式,就很难做双层的,因为你的每篇日志的模块已经有背景图片了。
    (2007-09-13 14:00:14)
    treeF | http://treef.blogbus.com @ 2007-09-12 22:47:42     [回复]
  • 忆瀞,我按你的方法已经实现了背景换图,真的很感激你;

    我11号才开的BLOG,对程序完全不懂,想不到遇到你这样的好心高人,你的BLOG很棒,几乎含盖摸板所有的教程方法,而且讲的非常细致入微,连我个对程序一窍不通的外行都学的带劲十足,佩服你尽心尽责的做事态度.希望与你交个朋友!!!

    你的BLOG也很漂亮呢!!!

    谢谢啦!!快乐!
    Kissdolphin 回复 treeF 说:
    很聪明喔~!
    (2007-09-13 13:58:38)
    treeF | http://treef.blogbus.com @ 2007-09-12 20:48:06     [回复]

  • 评论分页:共3页 1 2 3 下一页 最后一页

╰εїз゚ Write Comments >>>

姓名 Name 
邮箱 E-mail 
主页 Website 
   

                
    因为永远记得自己曾经无助,如果在BUS我可以帮助到你,尽点绵薄之力。
    不过新模板限制诸多,没研究过,仅限旧模板喔:)
请关注自然,保护动物!