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