Monday, March 19, 2007

背景屬性

要設定背景,可利用CSS background properties來完成,它可控制某一元素的背景顏色 (background-color) 、 設定背景圖 (background-image)、水平或垂直地來重複背景影像 (background-repeat)、或是把影像放在頁面的某一位置(background-position)。
若嫌個別設定這些屬性很麻煩,還可以用background屬性,一次做完所有相關的設定。
例如:
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; background: url(arrow.gif) 100% 100% no-repeat;}

則會在ID為sidebar的div中,在其右下角的位置加入單一的arrow.gif背景影像。
延伸應用:
由於arrow.gif是div內的背景,若要讓它看起來突出於內容之外,可以利用padding屬性,加大底部的padding,使圖形看起來好像是落在內容的下方。例如:
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; background: url(arrow.gif) 100% 100% no-repeat; padding: 0 0 15px;}
詳細屬性可見:w3schools的解說