|
1樓
大 中
小 發表於 2007-1-21 20:10
【CSS語法】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
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
|
|
