加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

新浪博客变脸总动员之博客背景图片代码

(2006-12-04 12:10:10)
分类: 一笔之力(blog教程及其他)
本文内容,严禁以各种方式抄袭,转载请注明来源!!
 
新浪博客变脸总动员之博客背景图片代码
 
这是一篇迟到的教程,因为工作的原因,这篇教程直到现在才和大家见面,但没关系,因为这也许仍旧是新浪博客背景代码中最齐全的一篇。
 
OK,废话不多说,直接进入主题吧————
 
现在教授新浪博客模版教程的朋友也不少,其中有一个代码是大家都比较喜欢的,那就是博客主页背景图片的代码。现在除了以前的那种背景代码,还有比如背景图片固定的代码(只有文字在滚动,背景图片不动),可是,是不是就只有这寥寥的两种方式呢?当然不了!
 
让我们先来回顾一下以前的代码——
.body
{background:url(页面背景图片) repeat
scroll
!important;}

这个代码是确定页面背景图片的路径,但大家应当注意到后面还有一个“repeat scroll”的字样,这又是什么意思呢?

repeat的意思是指图片在纵向和横向都进行重复平铺,简单点说,如果你的背景图片比较小,那么它就会在屏幕中呈现平铺效果。而scroll则是滚动的意思,加起来也即是图片平铺并且随屏幕滚动的意思

其实,除了这个参数,我们还可以在加入更多的代码以实现其他的效果。


repeat:repeat             背景图片横向和纵向重复平铺。 
repeat:no-repeat          背景图片不重复平铺。 
repeat:repeat-x           背景图片横向重复平铺。 
repeat:repeat-y           背景图片纵向重复平铺。 
attachment: fixed         背景图片固定 
attachment: scroll        背景图片随屏幕滚动 
position: center          背景图片水平居中 
position: center center   背景图片水平且垂直居中

大家如果有兴趣的话,可以自己在博客里实验一下。方法就是用上面的代码替换前面的repeat scroll部分,当然也可以自由组合和搭配,为了不打扰大家DIY的雅兴,各种效果还是留着有兴趣的朋友自己去发掘吧!!。

好了,今天就先讲这么多了,咱们下次再说!!


游虾的其他教程——————
 
游虾提供的素材——————
 
 
 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有