4.9 自我测试
![]()
1.建立一个文档,将前景文本设置为浅色,同时配上深色背景图片,要求不能使用background快捷定义。
2.选择一张背景图片,将背景图片放置于文档画布的右上方,要求不随文本粘连拖动,且不能使用background快捷定义。
3.将第1题和第2题用background快捷属性定义。
![]()
1.本题的关键在于设置深色背景图片的同时,必须设置深色背景色。本题答案如示例4.13。
示例4.13
<html>
<head>
<title>CSS Demo</title>
<style>
body { background-color: #330000;
background-image: url(bg.gif);
color: #CCCCCC; }
</style>
</head>
<body>
<p>本题的关键在于设置深色背景图片的同时,必须设置深色背景色。</p>
</body>
</html>
由于背景图片在复杂的网络传输过程中会因为种种原因无法正确显示,因此在设置背景图片的同时必须设置背景颜色,以便在背景图片无法显示的时候替代显示。
2.本题利用background-position属性定义背景图片的位置。如果要把背景图片放置在右上角,则用“right top”、“top right”或者“100% 0%”都是等效的。
然后利用background-attachment属性的“fixed”属性值将背景图片固定在当前位置,具体代码如示例4.14所示。
示例4.14
<style>
body { background-image: url(my_logo.gif);
background-position: 100% 0%;
background-repeat: no-repeat;
background-attachment: fixed; }
</style>
3.用background快捷定义方式代替前两题的各自定义,代码如示例4.15所示。
示例4.15
background: #330000 url(my_bg.gif) no-repeat fixed 100% 0%;






