CSS學習 - 背景篇
背景(Background)的部分
用於背景的properties有以下這些
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-color這個property是指定HTML一個元素的背景顏色
- 範例 : 對body這個選擇器的背景顏色做設定
- body {background-color:#b0c4de;}
- 通常顏色的value會用以下幾點來表示
- 十六進位的值,如 "#ff0000"
- RGB的值,如 "rgb(255,0,0)"
- 顏色的名字,如 red
- 範例 :
- h1 {background-color:#6495ed;} (讓h1的背景顏色為 #6495ed
- p {background-color:#e0ffff;}
- div {background-color:#b0c4de;}
- 直接舉例比較快
- body {background-image:url('paper.gif');}
- body {background-image:url('bgdesert.jpg');}
- 可以讓圖片在x軸或y軸重複並列
- body
- {
- background-image:url('gradient2.png');
- background-repeat:repeat-x; //向x軸並列
- }
- 效果請看
- 讓圖片不會自己並排顯示
- body
- {
- background-image:url('img_tree.png');
- background-repeat:no-repeat;
- }
- 請看原W3School的Demo
- 原本設定為背景的圖片會自動並排顯示,透過css的no-repeat設定,讓圖片只顯示一次
- 讓圖片不會並排顯示並指定顯示在右上(下)方(background-position:right top(bottom);)
- body
- {
- background-image:url('img_tree.png');
- background-repeat:no-repeat;
- background-position:right top;
- }
- 請看原W3School的Demo
- 透過設定background-position:right top將圖片位置顯示在右上方,右下方則將value改成right bottom!
- 背景相關properties的快速寫法
- body {background:#ffffff url('img_tree.png') no-repeat right top;}
- 背景顏色 : 白色
- 背景圖片 : img_tree.png
- 設定不並排顯示並且只顯示在右上方!
- 請看原W3School的Demo
- 讓背景圖片永遠固定在螢幕的某個位置
- body
- {
- background-image:url('smiley.gif');
- background-repeat:no-repeat;
- background-attachment:fixed;
- }
- 請看W3School的Demo並動手拉動Scroll Bar看看吧!
留言
張貼留言