OECSPACE - Css style 教學- 背景屬性一覽

OECSPACE - Css style 教學「背景屬性一覽」

CSS串聯樣式表教學『背景屬性一覽』

background-color:#fff; /*背景色彩*/
background:transparent; /*透視背景*/
background-image : url(bg.jpg); /*背景圖片*/
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; /*置中對齊*/

背景樣式簡寫解說:

簡寫的順序為：
background-image | background-color | background-repeat | background-attachment | background-position
例如:
background-image : url(bg.jpg); /*背景圖片*/
background-color:#fff; /*背景色彩*/
background-repeat : repeat-x; /*在 x 軸重複排列*/
background-attachment : fixed; /*浮水印固定背景*/
background-position : top left; /*背景位置靠上靠左*/

簡寫寫法:
background : url(bg.jpg) #fff repeat-x fixed top left;

背景樣式範例

假設下方的一個框框都代表一個網頁，我們來看看背景的排列變化：
直接使用框框內的語法在<head></head>之間，前方的body就是代表在整個網頁定義背景樣式。

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

<style type="text/css">
<!--
body{
background-image : url(img/bg.gif);
background-position : 90% 90%;
}
-->
</style>

將背景排列在網頁x軸，且固定不隨者捲動

<style type="text/css">
<!--
body{
background-image : url(img/bg.gif);
background-repeat : repeat-x;
}
-->
</style>