曝光台 注意防骗
网曝天猫店富美金盛家居专营店坑蒙拐骗欺诈消费者
celebrate the new millennium! You’re invited to a party on
December 31, 1999 to celebrate the new millennium! You’re
invited to a party on December 31, 1999 to celebrate the new
millennium! You’re invited to a party on December 31, 1999 to
celebrate the new millennium!
</INVITATION>
12.11.3 background-repeat 属性
background-repeat 属性调整背景影像如何在屏幕上平铺。可指定背景影像为不平铺或只以水平或垂直方向平铺。此属性可
取的值如下：
repeat
repeat-x
repeat-y
no-repeat
例如，要在请谏上仅显示一顶舞会帽，可设置INVITATION 元素的background-repeat 为no-repeat。图12-12 显示的就是
这种情景。例如：
INVITATION { background-image: url(party.gif);
background-repeat: no-repeat }
XML 实用大全
第 383 页
要在页面上横向平铺而不是向下平铺，可设置background-repeat 为repeat-x，如下所示。图12-13 显示的背景影像是横
向平铺而不是向下平铺。
INVITATION { background-image: url(party.gif);
background-repeat: repeat-x }
图12-12 未平铺的背景影像
图12-13 横向而不是向下平铺的背景影像
如要在页面上向下平铺而不是横向平铺，可按下面的语句将background-repeat 设置为repeat-y。图12-14 显示的就是这
种情景。
XML 实用大全
第 384 页
图12-14 向下而不是横向平铺的背景影像
INVITATION { background-image: url(party.gif);
background-repeat: repeat-y }
12.11.4 background-attachment 属性
在HTML 中，背景影像是附加到文档上的。当滚动文档时，背景影像也随之滚动。使用background-attachment 属性，就可
以指定背景只附加于窗口或是窗格上。可取的值是scroll 和fixed。缺省值是scroll，这就是说，背景附加于文档而不是
窗口之上。
但是，将background-attachment 设置为fixed，文档就会滚动，但背景影像不滚动。当不想使此影像平铺，而对于一般类
型的浏览器来说图像已大到充满窗口，但大文档的背景要小时，将此属性设置为fixed 可能是有用的。这时可编码如下：
DOCUMENT { background-attachment: fixed;
background-repeat: no-repeat }
无论是IE 5，还是Mozilla 都不支持固定的背景影像。在以后的发行版中有可能增加此功能(CSS1 规范不需要浏览器支持固
定背景)。
12.11.5 background-position 属性
在缺省条件下，背景影像的左上角与它所连接的元素的左上角对齐(见图12-12)。在多数情况下，这样就能满足人们的需要。
但是，在少数情况下，可能还需要其他可能，background-position 就允许人们相对于元素来移动背景。
可使用父元素的宽和高度的百分数、绝对长度或下列六个关键字中的两个来指定偏移量：
top
center
bottom
left
center
right
12.11.5.1 父元素的宽和高度的百分数
百分数能够把各部分的背景与元素的相应部分紧紧地联系在一起。x 坐标的百分数范围从0%(左侧)到100%(右侧)变化。y
坐标的百分数变化范围是从0%(顶端)到100%(底部)。例如，下面这条规则把影像的右上角置于INVITATION 的右上角。图
12-15 为该情况的显示结果。
INVITATION { background-image: url(party.gif);
XML 实用大全
第 385 页
background-repeat: no-repeat;
background-position: 100% 0% }
图12-15 与内容右上角对齐的背景影像
12.11.5.2 绝对长度
绝对长度决定背景的左上角在元素上的绝对位置。下面这条规则把背景影像party.gif 的左上角放置在距元素右边1 厘米、
左上角下方2 厘米的位置。图12-16 显示的就是这种情景。
INVITATION { background-image: url(party.gif);
background-repeat: no-repeat;
background position: lcm 2cm }
图12-16 距元素右边1 厘米、左上角下方2 厘米的背景影像
12.11.5.3 关键字
XML 实用大全
第 386 页
top left 和left top 关键字与0% 0%相同。top、top center 和center top 与50% 0%相同。right top 和top right 关键
字与100% 0%相同。left、left center 和center left 关键字与50% 50%相同。right、right center 和center right 关
键字与100% 50%相同。bottom left 和left bottom 关键字与0% 100%相同。bottom、bottom center 和center bottom 与
50% 100%相同。bottom right 和right bottom 关键字与100% 100%相同。图12-17 将这些关键字与元素框上的各位置联系
在一起了。
top left
left top
0% 0%
top
top center
center top
50% 0%
top right
right top
100% 0%
left
center left
left center
0% 50%
center
center center
50% 50%
right
center right
right center
100% 50%
bottom left
left bottom
0% 100%
bottom
bottom center
center bottom
50% 100%
bottom right
right bottom
100% 100%
图12-17 背景影像的相对位置
例如，以请谏为例，最好的效果是把影像牢牢地固定于窗口的中间(如图12-18 所示)。下列是需要的规则：
INVITATION { background-image: url(party.gif);
background-repeat: no-repeat;
background-position: center center }
XML 实用大全
第 387 页
图12-18 固定于INVITATION 元素中间的无平铺背景影像
如果background-attachment 属性值为fixed，那么影像放置的位置就是窗口边的相对位置，而不是元素的相对位置。
12.11.6 背景简略属性
background 属性是在一条规则中设置background-color、background-image、background-repeat、background-attachment
中国航空网 www.aero.cn
航空翻译 www.aviation.cn
本文链接地址：
XML实用大全(109)
