CSS背景实验2——CSS实验室

接着上一节,我们首先来设置网页的背景图片。注意:设置背景图片之后文字会变得不太易读,可以找到下面的“不重复”按钮点击一下。

background-image:url(../../images/logo.gif);

背景图片重复

通过为CSS的"background-repeat"属性设置不同的值,我们可以让背景图片以不同的方式重复,或者根本就不重复。例如,该属性的属性值如下。各个语句的意义与按钮上的文字相同,可以点击各个按钮看看实际效果。

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

background-repeat:repeat;

背景图片是否滚动

CSS中的"background-attachment"属性用来控制背景图片是否跟随滚动条滚动。若设置为"scroll"则表示背景滚动,也就是说上面的背景会消失,而fixed的背景图片是不会动的。文字解释可能不太好理解,可以分别点击下面的两个按钮,然后尝试着滚动浏览器的滚动条。

background-attachment:scroll;

background-attachment:fixed;

背景图片位置

通过CSS的"background-position"属性可以控制背景图片显示的位置。可以设置的属性值在下面的下拉列表中。注意,其中指定像素和百分比的方式可以自己给定值。

background-position:  

背景

最后来介绍一下CSS背景的缩写形式。我们可以通过CSS提供的"background"属性,一次指定所有的背景属性。这样就省去了分别指定多个属性的麻烦。下面就给出一个例子

background:aqua url(../../images/logo.gif) repeat-y scroll top left;

各个属性的指定顺序如下:background-color、background-image、background-repeat、background-attachment、background-position。


返回:CSS实验室 CSS入门 首页