背景性質設定可說是CSS最強悍的地方,有了這些CSS,我們甚至可以在一段文字,或一格表格中,套用不同的背景。
<HTML>
<HEAD>
<STYLE>
SPAN {position:absolute;border:solid 1px black;width:300px;height:100px}
SPAN.front {position:absolute;background:url(../Graph/001.jpg)
repeat}
SPAN.back {position:absolute;background:url(../Graph/002.jpg)
repeat}
SPAN SPAN {position:absolute;width:200;font:bold 50px Arial;border:none}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS=back STYLE="top:20px;left:20px"></SPAN>
<SPAN CLASS=front STYLE="top:0px;left:0px">
<FONT STYLE="color:gray;top:25px;left:57px">SCJH</FONT>
<FONT STYLE="color:blue;top:18px;left:50px">SCJH</FONT>
</SPAN>
</BODY>
</HTML>
功能 :設定背景圖片、顏色、混合、透空、捲動、位置、重複
語法 :
{ BACKGROUND : TRANSPARENT︱( scroll )︱( color )︱URL ( url )︱( position )︱(
repeat ) }
功能 :設定背景圖片是否捲動 ( 分為 : 捲動、固定 )
語法 : { BACKGROUND-ATTACHMENT : SCROLL︱FIXED }
功能 :設定背景顏色、透空
語法 : { BACKGROUND-COLOR : TRANSPARENT︱( color ) }
( color ) 可為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度
範例 : {BACKGROUND-COLOR:#FF0000}
功能 : 設定背景圖片
語法 : { BACKGROUND-IMAGE : NONE︱URL ( url ) }
範例 : {BACKGROUND-IMAGE:URL(1.JPG)}
功能 :設定背景位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 :
{ BACKGROUND-POSITION : TOP︱MIDDLE︱BOTTOM︱LEFT︱CENTER︱RIGHT︱( length )︱(
position ) }
功能 :設定背景重複填滿方式
語法 : { BACKGROUND-REPEAT : REPEAT︱REPEAT-X︱REPEAT-Y︱NO-REPEAT }