背景圖像

重覆設定

  網頁的背景預設是會沿 X 及 Y 軸不斷地重覆,這種方式的優點是可以讓尺寸小的圖像填滿整個背景。但有時候你會希望背景圖像不要重覆,只出現一次就好了,這時候怎麼辦呢?有些人會將背景圖像製作成 800×600 或更大的尺寸,這的確是一種解決的方法,但卻會讓參觀者失去耐心。因為一張尺寸高達 800×600 的圖像,除非它的色階極少,否則檔案都會很大,下載起來非常耗時。再加上每個參觀者的瀏覽器顯示區域都不同,除非你製作一張無限大的圖像,要不然總是會有人看到重覆的背景圖像。

  然而,你只要在網頁上加入以下的敘述,就可以讓背景圖像不再重覆了。

<style>
<!--
BODY {background-repeat:no-repeat;}
--
>
</style>

  如果你想讓背景圖像只沿 X 或 Y 軸重覆的話,則可以將上方的 no-repeat 改成 repeat-xrepeat-y 即可。

捲動設定

  除了讓背景圖像不重覆顯示外,你還可以讓背景圖像固定住,不隨著參觀者移動捲軸而改變位置。

<style>
<!--
BODY {background-attachment:fixed;}
--
>
</style>

位置設定

  網頁的文字可以非常簡單地置中對齊,但以往背景圖像卻無法這麼做,還好 CSS 支援了這個功能,可以讓你任意地擺放背景圖像。以下的敘述就可將背景圖像擺放在瀏覽器畫面正中央,且不會重覆顯示。

<style>
<!--
BODY {background-position:center center;background-repeat:no-repeat;}
--
>
</style>

  除了擺放在瀏覽器畫面正中央外,你還可以使用 topbottomleftright 等,以下的敘述可將背景圖案擺放在瀏覽器畫面中央,並會沿 X 軸重覆顯示,但不受到移動捲軸的影響。

<style>
<!--
BODY {background-position:center left;background-repeat:repeat-x;background-attachment:fixed;}
--
>
</style>

回上層 背景圖像 濾鏡特效

Microsoft FrontPage Last Updated: 01/06/99 Get Microsoft Internet Explorer

歡迎來信指教!indyhsu@gcn.net.tw