2010年8月12日 星期四

CSS 之 背景 (background) 屬性說明

由於html語法會被解析,所以不能發code,用圖片代替。



p {
background-image: url(img.gif);
}
執行結果:



加入 CSS 樣式,background-repeat 是否重覆,預設是x軸和y軸重覆執行結果如上圖。
p {
background-image:url(img.jpg);
background-repeat: no-repeat;
}

background-repeat: no-repeat; 不重覆背景圖片,執行結果如下:



background-repeat: repeat-x; 只重覆x軸,執行結果如下:



repeat-x 這是不斷重覆至瀏覽器右邊界,而且隨瀏覽器,左右拉動而改變。

background-repeat: repeat-y; 只重覆y軸,執行結果如下:



repeat-y 只重覆到文字結束那行。

---------------
加入 CSS 樣式,background-position 顯示背景圖位置,它後面必需跟2個參數,

分別是上中下(top,center,bottom),左中右(left,center,right),各選其一。

例如:background-position: center center; 執行結果如下:



那2參數也可以設%來調整位置,如 background-position: 30% 30%; 執行結果如下:



介紹大約就到這邊,不過我想只有background-repeat: no-repeat;這參數用的到吧,不然就不設都重覆。

.

沒有留言:

張貼留言