CSS入门教程-背景属性(background)

发布时间:2020-03-24编辑:脚本学堂
CSS入门教程-背景属性(background)

背景属性看起来似乎不如文字和文本等属性重要,但事实上它往往决定了网站的整体风格。

背景属性(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.jb200.com/images/css_xue.jpg);
}
</style>

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

不重复

复制代码 代码如下:

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

只在水平方向重复

复制代码 代码如下:

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

只在垂直方向重复

复制代码 代码如下:

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

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

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

复制代码 代码如下:

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

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

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

复制代码 代码如下:

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

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