CSS 背景圖像 background-image屬性

除了背景顏色，也可以使用背景圖像來實現各種複雜、有趣的背景效果。CSS中，使用 background-image屬性來定義背景圖像的路徑，取值為 none | url，默認值為 none。
url 可以是相對路徑，也可以是絕對路徑。使用相對路徑時，url 是相對於 css 所在的文件，而不是要設置樣式的HTML文件。如，下面代碼表示，使用 css 文件所在目錄下的 img 文件夾下的圖像 bg.gif 作為背景圖像：

div { width: 200px; height: 200px; background-image: url(img/bg.gif); }
默認情況下，背景圖像會在水平方向和垂直方向重複，以填滿整個容器。假如有一幅圖案 bg.gif，其尺寸為 100px * 100px。如圖 4‑25 所示：
圖4-25 背景圖案
由於容器 div的尺寸為 200px * 200px，如果把圖案 bg.gif 作為容器 div 的背景，則背景會在水平方向和垂直方向各重複兩次，顯示效果如圖 4‑26 所示：
圖4-26 背景圖像
關於作者
歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭秘CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。