您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>建站知识>>>建站与网页制作知识>>>CSS入门教程——背景属性(background)
CSS入门教程——背景属性(background)
发表日期:2007/7/19 1:42:00 出处:中国教程网 作者:未知 发布人:gxlan88 已被访问 1907

 

   背景属性(background)

    回想一下你最喜欢的网站?你知道它们的首页标题字号吗?也许不。那么试着回忆起一些关于网站外观的东西。怎么样,是不是还记得它们的背景颜色?事实上,如果你有一个比较有名气的网站。然后假设你更改了它的背景颜色,那么马上会有人认为你的网站改版了。我想这足以说明背景的重要性。下面我们就介绍一些常用的CSS背景属性。

    1.背景颜色属性(background-color)

<style type="text/css">
body { background-color:red ;}
</style>

    2.背景图片(background-image)

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/LOGO.gif) ;}
</style>

    正如你所看到的,默认情况下背景图片将会不断重复,直到添满整个页面,下面我们来看看如何控制图片的重复。

   3.背景图片的重复设置(background-repeat)

     不重复

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/LOGO.gif);
background-repeat:no-repeat; }
</style>

     只在水平方向重复;

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/LOGO.gif);
background-repeat:repeat-x;}
</style>

    只在垂直方向重复

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/LOGO.gif);
background-repeat:repeat-y;}
</style>
 

    4.背景图片位置(background-position)

    除了设置背景图片的重复属性之外,我们还可以控制背景图片出现的位置。

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/LOGO.gif);
background-position:center;
background-repeat:no-repeat;}
</style>

    5.将背景图片固定在页面的某个位置(background-attachment)

    通过该属性可以设置背景图片是否随着滚动条滚动而改变位置。

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/LOGO.gif);
background-attachment:fixed;
background-repeat:no-repeat }
</style>

    以上只是做为实例的网页,在实际的网页设计过程中,还要注意网页的背景颜色与文字颜色配合得是否合理等等细节问题。

 

    上篇:CSS入门教程——文本属性)

    下篇:CSS入门教程——列表

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

山里人网站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:313538590 752398505 联系人:山里人