CSS是Cascading Style Sheets的縮寫，我們中文稱為「串聯樣式表」
CSS串聯樣式表教學『背景屬性一覽』
  • background-color:#F5E2EC; /*背景色彩*/
  • background:transparent; /*透視背景*/
  • background-image : url(image/bg.gif); /*背景圖片*/
  • background-attachment : fixed; /*浮水印固定背景*/
  • background-repeat : repeat; /*重複排列-網頁預設*/
  • background-repeat : no-repeat; /*不重複排列*/
  • background-repeat : repeat-x; /*在x軸重複排列*/
  • background-repeat : repeat-y; /*在y軸重複排列*/
  • 指定背景位置 [ 以下方式皆可使用 ]
  • background-position : 90% 90%; /*背景圖片x與y軸的位置*/
  • background-position : top; /*向上對齊*/
  • background-position : bottom; /*向下對齊*/
  • background-position : left; /*向左對齊*/
  • background-position : right; /*向右對齊*/
  • background-position : center; /*置中對齊*/
背景樣式範例
假設下方的一個框框都代表一個網頁，我們來看看背景的排列變化：直接使用框框內的語法在<head></head>之間，前方的body就是代表在整個網頁定義背景樣式。
將背景放在網頁x軸90% y軸90%的地方，且固定不隨者捲動
<style type="text/css">
<!--
body{
background-image : url(img/bg.gif); /*背景圖片*/
background-position : 90% 90%; /*x與y軸的位置*/
}
-->
</style>

將背景排列在網頁x軸，且固定不隨者捲動
<style type="text/css">
<!--
body{
background-image : url(img/bg.gif); /*背景圖片*/
background-repeat : repeat-x;/*在x軸重複排列*/
}
-->
</style>
背景樣式簡化寫法
background:url(img/bg.gif) #fff repeat-x fixed ;
指定背景位置另一種寫法
background:url(img/bg.gif) no-repeat top right ;/*右上的位置*/
相當於座標 100% 0% 的位置
XHTML1.0 | CSS | Copyright © 2001-2008 by OECSPACE