您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——布景特点(background)

2014-10-22  

布景特点(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>

以上仅仅做为实例的网页,在实践的网页规划过程中,还要留意网页的布景色彩与文字色彩配合得是否合理等等细节问题。