CSS背景 (Background)

介紹 CSS圖片背景、顏色背景、圖片背景位置屬性設定與應用


CSS 背景(background) 屬性表

屬性 說明
background 設定背景屬性簡化寫法,可替代下方寫法
background-color 設定背景顏色
background-image 設定背景圖案
background-size 設定背景圖案尺寸
background-repeat 設定背景圖片重複顯現,可分填滿重複、水平重複、垂直重複、不重複
background-position 設定背景圖片位置
background-attachment 背景圖片位置是否要固定

範例::CSS 背景顏色

範例觀測重點 :設定背景顏色

動手實驗一下 : 將 屬性值改變看看背景顏色呈現的變化

背景種類:

背景可以是顏色 、圖片

語法可簡寫 list-style: url("bg.gif");


background (簡化的屬性語法)

元素{屬性: 值 }檢視結果
p {background:#cccfff;}

呈現的背景色彩

h2 { background:url('bg.gif');}

呈現的背景圖片


background-color (顏色屬性)

元素{屬性: 值 }檢視結果
p {background-color:#cccfff;}

呈現的背景色彩

h2 { background-color:red;}

呈現的背景色彩


background-image (背景圖片屬性)

元素{屬性: 值 }檢視結果
p {background-image:url('bg.gif');}

呈現的背景圖


background-size (背景圖片尺寸屬性)

元素{屬性: 值 }檢視結果
p {background-image:url('bg.gif');background-size:80px 60px;}

呈現的背景圖


background-repeat (背景圖片重複方式屬性)

元素{屬性: 值 }檢視結果
p {background-image:url('bg.gif');}

預設水平填滿背景圖

p { background-image:url('bg.gif');background-repeat:repeat-y;}

垂直填滿
背景圖

p { background-image:url('bg.gif');background-repeat:no-repeat;}

不重複
背景圖


background-position (背景圖片位置屬性)

元素{屬性: 值 }檢視結果
p {background-image:url('bg.gif');
background-repeat:no-repeat;
background-position:right top;}

指定的背景圖
位置


background-attachment(背景圖片附著方式屬性)

元素{屬性: 值 }說明
body { background-image:url('bg.gif');
background-repeat:no-repeat;
background-attachment:fixed; }

背景圖位置不隨螢幕畫面捲動(scroll)而移動