0030.htm

来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 321 行 · 第 1/2 页

<p><font size="3">你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什么位置。朋友，这是真的！ 
</font></p>
<font size="3">

<p><b><tt>背景重复</tt></b> (background-repeat) </font></p>

<p>背景图象通常是平铺在背景上的，对吗？错。利用这项<font
face="宋体">CSS</font>属性，你可以控制是否将其平铺。 

<ul>
  <tt><p><font face="宋体">P { background-repeat: no-repeat; background-image: url(<br>
  background.gif) }</font></p>
  </tt>
</ul>

<p style="background-repeat: no-repeat; background-image: url(background.gif)">上述规则应用于整个段落。我们以前用过的<font
face="宋体">GIF</font>图象出现在文字后面，但由于我们应用了不重复图象（<font
face="宋体">no-repeat)</font>规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。</p>

<p style="background-repeat: repeat-x; background-image: url(background.gif)">如果你只想让图象垂直或者水平方向平铺，你以使用<font
face="宋体">repeat-x</font>将其水平平铺，用<font face="宋体">repaet-y</font>将其垂直平铺。而<font
face="宋体">repeat</font>参数值则将图象从水平和垂直两个方向平铺。</p>

<p><b><tt>固定背景（<font face="宋体">background</font>－<font face="宋体">attachment</font>）</tt></b></p>

<p>在<font face="宋体">HTML</font>中，背景图象通常会随页面的滚动而一起滚动。但利用<font
face="宋体">CSS</font>的固定背景（<font face="宋体">background</font>）属性，你可以建立不滚动的背景图象，页面滚动时，背景图象可以保持固定。 

<ul>
  <tt><p><font face="宋体">BODY { background-attachment: fixed; background-image: url(<br>
  15/stuff3a/background.gif) }</font></p>
  </tt>
</ul>

<p>该属性只用于页面背景，即 &lt;BODY&gt;</font>标签内设定的背景图象。 
</p>

<p>其参数有两种选择： 

<ul>
  <li> <tt>scroll</tt></font>指背景图象随文字内容一起滚动，即通常所见的方式。 
  </li>
  <li> <tt>fixed</tt></font>指文字滚动时，背景图象保持固定。</li>
</ul>

<p><b><tt>背景定位 (background-position)</font></tt></b></p>

<p>你可以设定将背景插在什么位置显示。 

<ul>
  <tt><p><font face="宋体">P { background-position: center bottom; background-image: url 
  (background.gif) }</font></p>
  </tt>
</ul>

<p style="background-position: center bottom; background-image: url(background.gif)">当上述<font
face="宋体">CSS</font>规则应用于本段文字时，背景图象将在本段的中下部开始显示并向右平铺。</p>

<p>如果你看不到上述的显示效果，则说明你所使用的浏览器是<font
face="宋体">Communicator</font>，它不支持背景定位。</p>

<p>设定位置的<font face="宋体">3</font>种方法： 

<ul>
  <li><b>关键字参数（<font face="宋体">Keyword values</font></b>） <p>关键字设定方法简便易用： 
    <ul>
      <li> <tt>top</tt></font>将背景图象同前景要素的顶部对齐。 </li>
      <li> <tt>bottom</tt></font>将其同前景要素的底部对齐。</li>
      <li> <tt>left</tt></font>将其同左边对齐。 </li>
      <li> <tt>right</tt></font>将其同右边对齐。 </li>
      <li> <tt>center</tt></font>将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。 
      </li>
    </ul>
  </li>
  <li><b>长度参数</b> <p>长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水平和垂直定位起点，例： 
    <ul>
      <tt><p><font face="宋体">P { background-position: 70px 10px; background-repeat: 
      repeat-y; background-image: url<br>
      (background.gif) }</font></p>
      </tt>
    </ul>
    <p
    style="background-position: 70px 10px; background-repeat: repeat-y; background-image: url(background.gif)">本段显示了上述规则的执行效果。<font
    face="宋体">IE</font>支持这种属性，将<font face="宋体">GIF</font>图象设置在从左上角起水平<font
    face="宋体">70</font>象素，垂直<font face="宋体">10</font>象素的位置。由于我设置了 
     <tt>background-repeat: repeat-y</tt></font>，<font face="宋体">GIF</font>图象将在文字后垂直平铺。</p>
    <p>你可以使用我们以前学过的任何一种长度单位，例如<font
    face="宋体">pixels, points, inches, ems</font>等。 </p>
    <p>（<font face="宋体">IE 3</font>不支持长度单位显示这种效果）</p>
  </li>
  <li><b>比例值（<font face="宋体">Percentage values</font></b>） <p>你还可以使用比例值设定背景图象的位置，例： 
    </p>
    <p> <tt>P { background-position: 75% 50%; background-image: url 
    (background.gif) }</tt> </font></p>
    <p style="background-position: 75% 50%; background-image: url(background.gif)">当这条<font
    face="宋体">CSS</font>规则应用于本段时，背景图象从水平距离段落右端<font
    face="宋体">70</font>％，垂直距离段落顶部<font face="宋体">50</font>％的位置显示。如果你重新调整浏览器窗口的尺寸，使得段落的显示尺寸变化，背景图象的位置也相应发生变化。在本段上不会发生这样的变化，因为本段的尺寸是固定的，不会随着窗口尺寸的调整而变化。</p>
  </li>
</ul>
<p><font size="3">利用快捷特性可以使你将学过的所有背景属性加到一个<font
face="宋体">CSS</font>规则中。 </font></p>
<font size="3">

<p><font face="宋体">IE 3</font>中你必须这样应用（如我们以前提过的），你也有可能会在所有浏览器中应用它。 
</p>

<p><b><tt>背景（<font face="宋体">background</font></tt></b>） </p>

<p>利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例： 

<ul>
  <tt><p><font face="宋体">P { background: url(background.gif) #CCFFCC repeat-y top right 
  }</font></p>
  </tt>
</ul>

<p style="background: url(background.gif) #CCFFCC repeat-y top right" align="center">本段应用了上述规则。你可以看到背景是浅绿色，背景图象只垂直平铺，第<font
face="宋体">1</font>次平铺的位置在右上角。注意<font face="宋体">Communicator</font>不支持背景定位属性。</p>

<p>如果你看不到该段文字描述的效果，则说明你的浏览器不支持这项<font
face="宋体">CSS</font>属性。</p>

<p>使用背景属性时，你无须设定背景的每一项目内容。你可以只设定你所要的背景图象和色彩，或者设定其它组合。 
</p>

<p>使用快捷特性时也会碰到使用单另的背景属性时遇到的各种浏览器问题。
<p><font size="3">请点击<a
href="javascript:if(confirm(' /webmonkey/98/15/stuff3a/4-exercise.html  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location=' /webmonkey/98/15/stuff3a/4-exercise.html'" tppabs="http://www.hotwired.com/webmonkey/98/15/stuff3a/4-exercise.html" target="_blank">本页</a>查看例子，并试着自己重新制作出例子中的效果，最好不要看代码。该例子用了两幅图象，你可以从<a
href="javascript:if(confirm(' /webmonkey/98/15/stuff3a/streak.gif  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location=' /webmonkey/98/15/stuff3a/streak.gif'" tppabs="http://www.hotwired.com/webmonkey/98/15/stuff3a/streak.gif">位置<font
face="宋体">1</font></a>.和<a
href="javascript:if(confirm(' /webmonkey/98/15/stuff3a/emma.gif  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location=' /webmonkey/98/15/stuff3a/emma.gif'" tppabs="http://www.hotwired.com/webmonkey/98/15/stuff3a/emma.gif">位置<font face="宋体">2</font></a> 
处下载。不要忘了，要使例子正确显示，你必须安装<font face="宋体">4.0</font>版的浏览器。 
</font></p>
<font size="3">

<p>小问题：如何让你的公司的标志不论页面滚还是浏览器窗口尺寸调整都永远显示在浏器窗口的右下角？在明天的课程前我将告你答案。
<p><font size="3">样式表使得网页设计更加有趣。我们新近掌握的控制背景图象的方法更另我们心动不已。<br>
<br>
以下是我们今天所学内容的总结： 

<ul>
  <li> <tt>color</tt></font>设定要素的前景颜色。</li>
  <li> <tt>background-color</tt></font>设定要素后面固定的颜色。</li>
  <li> <tt>background-image</tt></font>是将<font face="宋体">GIF</font>和<font
    face="宋体">JPEG</font>图象插入到文字和其它要素后面的方法。</li>
  <li> <tt>background-repeat</tt></font>可以控制是否将背景图象平铺。</li>
  <li> <tt>background-attachment</tt></font>控制是否将背景图象固定在屏幕显示上，不随文字的滚动而滚动。</li>
  <li> <tt>background-position</tt></font>用于精确控制背景图象相对于要素的显示位置。</li>
  <li> <tt>background</tt></font>是设定所有有关背景设置的属性的快捷方式。 
  </li>
</ul>
</font>

<p><font size="3">明天将是样式表课程的最好一天，我们将学习将要素设置在页面的任何位置的方法，及如何将各要素叠放在彼此之上。明天见！ 
</font></p>

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>