考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:设计制作 > CSS/HTML > 文章内容
  

5日精通CSS层叠样式表(第4日)

 [ 2016年10月8日 ] 【

BODY { background-attachment: fixed; background-image: url(
15/stuff3a/background.gif) }
这里是一个例子,你可以看到页面滚动时,背景仍保持固定。(注意:Communicator不支持这项属性,IE可以。)
该属性只用于页面背景,即<BODY>标签内设定的背景图象。
其参数有两种选择:
scroll指背景图象随文字内容一起滚动,即通常所见的方式。
fixed指文字滚动时,背景图象保持固定。
背景定位(background-position)
你可以设定将背景插在什么位置显示。
P { background-position: center bottom; background-image:
url (background.gif) }
当上述CSS规则应用于本段文字时,背景图象将在本段的中下部开始显示并向右平铺。
如果你看不到上述的显示效果,则说明你所使用的浏览器是Communicator,它不支持背景定位。
设定位置的3种方法:
关键字参数(Keyword values)
关键字设定方法简便易用:
top将背景图象同前景要素的顶部对齐。
bottom将其同前景要素的底部对齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中(如果使用在另一关键字前面)或垂直居中(如果用在另一关键字后面)。
长度参数
长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水平和垂直定位起点,例:
P { background-position: 70px 10px; background-repeat:
repeat-y; background-image: url
(background.gif) }
本段显示了上述规则的执行效果。IE支持这种属性,将GIF图象设置在从左上角起水平70象素,垂直10象素的位置。由于我设置了
background-repeat: repeat-y,GIF图象将在文字后垂直平铺。
你可以使用我们以前学过的任何一种长度单位,例如pixels,
points, inches, ems等。
(IE 3不支持长度单位显示这种效果)
比例值(Percentage values)
你还可以使用比例值设定背景图象的位置,例:
P { background-position: 75% 50%; background-image: url
(background.gif) }
当这条CSS规则应用于本段时,背景图象从水平距离段落右端70%,垂直距离段落顶部50%的位置显示。如果你重新调整浏览器窗口的尺寸,使得段落的显示尺寸变化,背景图象的位置也相应发生变化。在本段上不会发生这样的变化,因为本段的尺寸是固定的,不会随着窗口尺寸的调整而变化。


4.6 快捷特性
利用快捷特性可以使你将学过的所有背景属性加到一个CSS规则中。
IE 3中你必须这样应用(如我们以前提过的),你也有可能会在所有浏览器中应用它。
背景(background)
利用背景属性,你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例:
P { background: url(background.gif) #CCFFCC repeat-y top
right }
本段应用了上述规则。你可以看到背景是浅绿色,背景图象只垂直平铺,第1次平铺的位置在右上角。注意Communicator不支持背景定位属性。
如果你看不到该段文字描述的效果,则说明你的浏览器不支持这项CSS属性。
使用背景属性时,你无须设定背景的每一项目内容。你可以只设定你所要的背景图象和色彩,或者设定其它组合。
使用快捷特性时也会碰到使用单另的背景属性时遇到的各种浏览器问题。


4.7 第4天的练习
请点击本页查看例子,并试着自己重新制作出例子中的效果,最好不要看代码。该例子用了两幅图象,你可以从位置1.和位置2
处下载。不要忘了,要使例子正确显示,你必须安装4.0版的浏览器。
小问题:如何让你的公司的标志不论页面滚还是浏览器窗口尺寸调整都永远显示在浏器窗口的右下角?在明天的课程前我将告你答案。


4.8 复习
样式表使得网页设计更加有趣。我们新近掌握的控制背景图象的方法更另我们心动不已。
以下是我们今天所学内容的总结:
color设定要素的前景颜色。
background-color设定要素后面固定的颜色。
background-image是将GIF和JPEG图象插入到文字和其它要素后面的方法。
background-repeat可以控制是否将背景图象平铺。
background-attachment控制是否将背景图象固定在屏幕显示上,不随文字的滚动而滚动。
background-position用于精确控制背景图象相对于要素的显示位置。
background是设定所有有关背景设置的属性的快捷方式。
明天将是样式表课程的最好一天,我们将学习将要素设置在页面的任何位置的方法,及如何将各要素叠放在彼此之上。明天见!

首页 1 2 尾页
本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved