可以使用各種顏色格式:16 進位代碼、rgba、hsla 等。
有一張圖片:
然後針對整個網頁(或任何元素區塊皆可),撰寫以下 CSS:
結果呈現:會發現此圖在 <body>
區域內,不斷地水平、垂直反覆出現圖片。
可選的值有:
repeat
:預設,指的是圖片向 x 軸、y 軸反覆出現。
repeat-x
:圖片向 x 軸反覆出現。
repeat-y
:圖片向 y 軸反覆出現。
no-repeat
:不反覆出現,只出現一次。
範例:
有一張圖片,大小為 寬 640px、高 428px:
撰寫如下:
結果如下:背景圖超過 div 的區域,會被遮掉看不到。
結果呈現:
特殊關鍵字(contain):(背景圖片 「寬」或「高」 其中一個會變成 100%,讓圖片在區域內能夠全部出現,不能被遮到。)
結果呈現:
如果將 div 的高度改成 100px 的話,則結果會變成:
特殊關鍵字(cover):(背景圖片 「寬」或「高」 其中一個會變成 100%,讓圖片能夠佔滿整個區域,圖片會有部份被遮到。)
結果如圖:
結果如圖:
所以該圖在區域內,搭配關鍵字的話,共有以下幾種組合:
也可以指定水平方向、固定方向的距離,單位可以是 px 或 %:
結果如圖:
也可以指定以下,表示距離右側 10px;距離下方 20px:
有以下三種模式:
scroll
:(預設),背景圖會隨著頁面滑動而跟著滑動,元素內則不會。
local
:元素區域內滑動則會跟著滑動。
fixed
:背景圖會固定在網頁的可視區域(viewport)。不管自己元素內、或頁面滑動,該背景圖皆不會滑動。
scroll(預設):
背景圖會隨著頁面滑動而跟著滑動;元素區域內滑動則不會跟著滑動。
local:
元素區域內滑動則會跟著滑動。
fixed(行動版瀏覽器不一定支援):
背景圖會固定在網頁的可視區域。
padding-box
:(預設值)。設定圖片顯示區域是從 padding 區域開始。
border-box
:設定圖片顯示區域是從 border 區域開始。
content-box
:設定圖片顯示區域是從 content 區域開始。
範例:
padding-box
:設定圖片顯示區域到 padding 區域,其它裁切。
border-box
:(預設值)。設定圖片顯示區域是到 border 區域,其它裁切。
content-box
:設定圖片顯示區域是到 content 區域,其它裁切。
範例:
方向可選的有:
to bottom:這是預設值。
to top
to right
to left
to bottom right
to bottom left
to top right
to top left
40deg (代表 to 40 度
的方向)
範例:
關於顏色停駐點:
1、紅色在 30px 的位置,綠色也在 30px 的位置,沒有任何漸層效果發生;0px ~ 30px 由紅色填滿;30px到最後,由綠色填滿:
示意圖:
2、紅色在 30px 的位置,綠色在 100px 的位置,30px ~ 100px 這個區域,紅色到綠色漸層;0px ~ 30px 由紅色填滿,100px 到最後由綠色填滿:
示意圖:
3、30px 到 100px 由紅色變到綠色;100px 到 250px 由綠色變到黃色:(推理方式同上)
示意圖:
範例:
可以直接參考這個例子,即各屬性值以半形逗號做區隔。