CSS背景設定

背景屬性一覽

background-color:#F5E2EC /* 背景色彩 */
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 軸的位置 */

將背景放在網頁 x 軸 90% y 軸 90% 的地方,且固定不隨著捲動

<style type=text/css>

<!--

body{

background-image : url(image/bg.gif); /*背景圖存放路徑*/

background-repeat : no-repeat; /*背景圖不要重複*/

background-position : 90% 90%; /*放在 x 軸 90% y 軸 90% */

background-attachment : fixed; /*背景固定*/

}

-->

</style>
將背景排列在網頁 x 軸,且固定不隨著捲動

<style type=text/css>

<!--

body{

background-image : url(image/bg.gif);

background-repeat : repeat-x;/*在 x 軸重複排列*/

background-attachment : fixed;

}

-->

</style>
將背景排列在網頁 y 軸,且固定不隨著捲動

<style type=text/css>

<!--

body{

background-image : url(image/bg.gif);

background-repeat : repeat-y;/*在 y 軸重複排列*/

background-attachment : fixed;

}

-->

</style>
背景固定─將小圖片固定在左下角

<head>

<style type=text/css>
<!--
body{

background-image:url(images/bg.gif); /*背景圖存放路徑*/

background-attachment:fixed; /*背景固定*/

background-repeat:no-repeat; /*背景圖不要重複*/

background-position:bottom left; /*置放位置 下面 左邊*/

}
-->
</style>

</head>

說明:

將images資料夾裡的 bg.gif 檔設為背景圖,固定顯示在左下角

用法:

1.將<style>...</style> 複製到 <head> </head> 之間
2.準備一張背景圖,檔名為 bg.jpg 儲存於 images 資料夾中
3.測試效果

背景樣式運用-內置框架完全透視

步驟一、先在你的網頁中設定的內置框架加入粗體字的部份

<iframe name="content" frameborder="0" height="400" width="500" scrolling="yes" src="home.html" allowtransparency="true" ></iframe>

步驟二、 複製語法貼於要顯示於內置框架的網頁<head></head>之間

<style type="text/css">
<!--
body{background-color:transparent}
-->
</style>

另一個做法:複製語法到scroll.css檔 body{ } 之間

background-color:transparent

參考網址:OECSpace

http://www.hsiu28.net/style/article_detail.php?id=3