CSS background-color 、image 背景圖片-html教學-PHP中文網

背景顏色 background-color

語法：

background-color：

預設值：transparent 透明性

預設值：transparent 透明性。

動畫性：是

計算值：指定值

取值：

：指定顏色。

設定或擷取物件的背景顏色。

當同時定義了背景顏色和背景影像時，背景影像會覆蓋在背景顏色之上。 如果設定了，同時也建議設定用於當背景圖像不可見時保持與文字顏色有一定的對比度。 對應的腳本特性為

背景圖片background-image

語法背景圖片background-image

文法background-image

：

[ , ]*

= | none

預設值：none

適用於：所有元素。

：指定值取值： none：無背景圖。

：使用絕對或相對位址指或建立漸層色來確定影像。

說明：

設定或擷取物件的背景影像。

如果設定了，同時也建議設定用於當背景圖像不可見時保持與文字顏色有一定的對比度。 如果定義了多組背景圖，且背景圖之間有重疊，寫在前面的將會蓋在寫在後面的圖像之上。 對應的腳本特性為

backgroundImage

。

background-image : url(“http://static.criteo.net/flash/icon/nai_small.png”); // 全URL路徑

background-image : 2/ /nai_small.png”); // 根路徑

background-image : url(“../nai_small.png”) ; // 相對於css檔案的路徑

background-image : url('../nai_small.png') ; // 單引號

文法

語法

background-repeat

：

[ , ]*

= repeat-x | repeat-y | [repeat | no-repeat |

| | round

]{1

}

預設值：repeat

：指定值取值： repeat-x：背景影像在橫向上平鋪repeat-y：背景影像在縱向上平鋪repeat：背景影像在橫向和縱向平鋪no-repeat：影像不平鋪

round：背景影像自動縮放直到適應且填滿整個容器。（CSS3） space：背景影像以相同的間距平鋪且填滿整個容器或某個方向。（CSS3） 說明：

設定或檢索物件的背景影像如何鋪排填充。必須先指定屬性。

允許提供2個參數，如果提供全部2個參數，第1個用於橫向，第二個用於縱向。 如果只提供1個參數，則用於橫向和縱向。 特殊值repeat-x和repeat-y除外，因為repeat-x相當於repeat no-repeat，repeat-y相當於no-repeat repeat，即其實repeat-x和repeat-y等價於提供了2個參數值

對應的腳本特性為backgroundRepeat

。





語法：

background-attachment： [ , ]*
= fixed | scrolled |

適用於：所有元素繼承性：無動畫性

：否計算值

：指定值值：

？ scroll：背景圖像相對於元素

固定，也就是說當元素內容滾動時背景圖像不會跟著滾動，因為背景圖像總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。

local：背景圖像相對於
元素內容
固定，也就是說當元素隨元素滾動時背景圖像也會跟著滾動，因為背景圖像總是要跟著內容。（CSS3）
說明：
設定或檢索背景影像是隨物件內容滾動還是固定的。必須先指定屬性。
對應的腳本特性為
backgroundAttachment

。

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="utf-8"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>background-attachment 背景跟着内容动<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span>
<span style="color: #800000; background-color: #f5f5f5">
    .parent</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2000px</span><span style="color: #000000; background-color: #f5f5f5">;</span>
    <span style="color: #000000; background-color: #f5f5f5">}</span><span style="color: #800000; background-color: #f5f5f5">

    .sample</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
    
        overflow</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> scroll</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        font-size</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 22px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        margin</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 230px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        border</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2px solid black</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        background-image</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> url(red.png)</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        <strong><font style="background-color: #ffff00">background-attachment</font></strong></span><strong><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> <font style="background-color: #ffff00">local</font></span></font><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">;</span></font></strong>
    <span style="color: #000000; background-color: #f5f5f5">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="parent"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="sample"</span><span style="color: #0000ff">></span><span style="color: #000000">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

登入後複製

CSS background-color 、image 背景圖片

背景顏色 background-color

語法：

backgroundImage

}

語法：

local： 背景圖像相對於

local：背景圖像相對於