CSS的background
發表人:
Seachaos
積分: 2432
積分: 2432
CSS的background屬性可以設定標籤的背景
可以是顏色或是圖片
CSS的顏色參數可以是文字、16進位色碼或10進位色碼
background的顏色範例如下(以DIV為例):
16進位色碼用#做開頭
style="background:#FF0000"
文字的話直接打上名稱,如blue,green,red等等
style="background:green"
10進位色碼用rgb和0~255表示
style="background:rgb(0,0,255)"
也可以是背景圖片(以DIV和MyAndroid的Logo為例)
style="background:url(images/base_04.gif);width:293px;height:94px;"
當然,背景可以設定重複或是不重複,用repeat設定
可以設定成
不重複: no-repeat
全部重複: repeat
水平重複: repeat-x
垂直重複: repeat-y
範例如下
不重複: no-repeat
style="background:url(images/base_04.gif) no-repeat;width:400px;height:400px;border:#CCC 2px solid;"
全部重複: repeat
style="background:url(images/base_04.gif) repeat;width:400px;height:400px;border:#CCC 2px solid;"
水平重複: repeat-x
style="background:url(images/base_04.gif) repeat-x;width:400px;height:400px;border:#CCC 2px solid;"
垂直重複: repeat-y
style="background:url(images/base_04.gif) repeat-y;width:400px;height:400px;border:#CCC 2px solid;"
還可以設定背景的位置
就在url()的後面是x與y出現位置
例如以下(此設定為no-repeat效果)
background:url() x位置 y位置
style="background:url(images/base_04.gif) 100px 50px no-repeat;width:400px;height:400px;border:#CCC 2px solid;"
可以是顏色或是圖片
CSS的顏色參數可以是文字、16進位色碼或10進位色碼
background的顏色範例如下(以DIV為例):
16進位色碼用#做開頭
style="background:#FF0000"
文字的話直接打上名稱,如blue,green,red等等
style="background:green"
10進位色碼用rgb和0~255表示
style="background:rgb(0,0,255)"
也可以是背景圖片(以DIV和MyAndroid的Logo為例)
style="background:url(images/base_04.gif);width:293px;height:94px;"
當然,背景可以設定重複或是不重複,用repeat設定
可以設定成
不重複: no-repeat
全部重複: repeat
水平重複: repeat-x
垂直重複: repeat-y
範例如下
不重複: no-repeat
style="background:url(images/base_04.gif) no-repeat;width:400px;height:400px;border:#CCC 2px solid;"
全部重複: repeat
style="background:url(images/base_04.gif) repeat;width:400px;height:400px;border:#CCC 2px solid;"
水平重複: repeat-x
style="background:url(images/base_04.gif) repeat-x;width:400px;height:400px;border:#CCC 2px solid;"
垂直重複: repeat-y
style="background:url(images/base_04.gif) repeat-y;width:400px;height:400px;border:#CCC 2px solid;"
還可以設定背景的位置
就在url()的後面是x與y出現位置
例如以下(此設定為no-repeat效果)
background:url() x位置 y位置
style="background:url(images/base_04.gif) 100px 50px no-repeat;width:400px;height:400px;border:#CCC 2px solid;"