玩转新浪之《博客模板DIY手把手之三—-背景篇》
【苏南博文导读】
上篇文章提到了更换背景图的概念,这里单开一个专题进行介绍背景图的更换办法。首先,要认识到页面上很多都是由背景图来进行控制的,而背景图又不同于一般的图片,就像一个相片一样,背景图只是一个背景,他不能获得焦点,而且他的显示完全决定于外边取景框的大小(div),那么知道这么多就可以了。下面开始介绍换背景图的办法
一、获得你认可的图的地址
在百度里面找到你喜欢的图片,在图片上点击右键,查看属性,获得地址。
并获得它的高度和宽度。或者你使用qq截图等截图工具都可以获得他的宽度和高度的,轻轻划一下而已。
例如:
http://yoururl/yourimg.jpg 760*120
或者
你如果你自己会photoshop的话,可以自己ps,然后上传到你的ftp,或者sina相册里面,或者sina知识人资料共享里面等等其它什么地方都可以,只要大家能过通过url地址进行访问到就可以了。 重点是你必须知道他最终的绝对地址和图片尺寸
二、获得你要修改的“镜框”的名称并进行填充【重点】
“镜框”就是我们要修改的对象的标示,而这个标示就是在页面中唯一标识它的值了,而有的时候会出现几个对象公用一个标识的情况,这样的时候,就需要区别对待。以后博客首页中的每个标识对象名称的我会在系列文章中告诉大家,大家请关注dom结构一段即可。例如上一篇文章里面提到的,页面最顶部的标识是“.bodytop”,然后对应的更换代码就是:
.bodytop{
background:url(http://yoururl/yourimg.jpg) left top no-repeat;
width:760px;
height:120px;
}
这里对上述参数进行说明,主要是 background 一项,
url()里面是你的图片的地址
left top 这个一般不要改动
no-repeat 就是说你的背景图在“镜框”里面不重复。
他的替代值有:repeat-x 横向重复 repeat-y 纵向重复
width除非特殊情况,一般不要改变,或者你可以不添加这项也可以。
height是随着你的背景高度变化而变化的。所以height选项只要你的背景图和原来的高度不同,就必须换哦~~~。呵呵。
三、你也可以选择不用图片而选择其它
透明的办法其实很简单,
就是把第二步中的background一项换成:
background:#transparent;
就可以了
或者
你还可以选择纯色填充
那么就是
background:#ff0000;
ff0000代表红色,每个颜色都有对应的值标示,大家可以自行修改
四、把本文的代码添加到首页即可
添加的办法请参考我系列博文之一,要是还是不明白,就请多多理解我的系列模板diy教程吧。
你要是实在看不懂,还想改模板。也许你可以选择我的付费服务。
不提供设计,只负责模仿目标模板,每个¥10,不管做图。呵呵~~
本文来自苏南的博客, 转载请注明网址:http://newsn.net, 谢谢!
我的淘宝小店:http://68zz.com
我的Sina圈子:http://q.blog.sina.com.cn/pctalk
