背景屬性設定


背景性質設定可說是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

功能 :設定背景圖片、顏色、混合、透空、捲動、位置、重複

語法 :
{ BACKGROUND : TRANSPARENT︱( scroll )︱( color )︱URL ( url )︱( position )︱( repeat ) }

BACKGROUND-ATTACHMENT

功能 :設定背景圖片是否捲動 ( 分為 : 捲動、固定 )

語法 :  { BACKGROUND-ATTACHMENT : SCROLL︱FIXED }

BACKGROUND-COLOR

功能 :設定背景顏色、透空

語法 :  { BACKGROUND-COLOR : TRANSPARENT︱( color ) }

( color ) 可為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度

範例 :  {BACKGROUND-COLOR:#FF0000}

BACKGROUND-IMAGE

功能 : 設定背景圖片

語法 :  { BACKGROUND-IMAGE : NONE︱URL ( url ) }

範例 :  {BACKGROUND-IMAGE:URL(1.JPG)}

BACKGROUND-POSITION

功能 :設定背景位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

語法 :
{ BACKGROUND-POSITION : TOP︱MIDDLE︱BOTTOM︱LEFT︱CENTER︱RIGHT︱( length )︱( position ) }

BACKGROUND-REPEAT

功能 :設定背景重複填滿方式

語法 :  { BACKGROUND-REPEAT : REPEAT︱REPEAT-X︱REPEAT-Y︱NO-REPEAT }