CSS background-image 背景圖片

CSS background-image 用來設定背景圖片,是 CSS background 的屬性之一,除了可以定義整個網頁的背景圖片,也可以用來設定單一網頁元素,如 DIV 區塊、span 區域或 HTML table 表格的背景圖片,background-image 是標準的 CSS 網頁元素背景圖案設計方法,通常可以與 background-positionbackground-repeatbackground-color 混搭設計,幾乎所有的主流瀏覽器都支援 background-image 屬性。

CSS background-image 基本語法

background-image: url( ' 圖片網址 ' );


範例中的 url 小括號內有三種可以使用的參數,分別為 none(預設值,不顯示圖片)、inherit(繼承自父層)以及圖片網址這三種,其中第一個參數 none 除非在特殊情況下才有必要,否則寫出來的意義其實並不大,inherit 則是部分版本的 IE 瀏覽器不支援,所以最有意義的寫法還是給出要顯示的圖片網址,以下有兩個範例分別設定整個網頁的背景圖片以及 DIV 區塊的背景圖片。

CSS background-image 範例一、網頁背景圖片
body {
 background-image:url( ' 要顯示的圖片網址 ' );
 background-repeat:no-repeat;
 background-color: 背景顏色;
}
直接在 body 設 background-image 是許多設計師常用的手法,優點是管理整個網頁背景較為便利,加入「background-repeat:no-repeat」的效果,意思是背景圖片不要重覆顯示,最後再加上 background-color 來做一個背景基本色,若遇到圖片未正常顯示的情況,至少還有背景顏色可以顯示,這也是設計網頁背景時的一種保險技巧,背景顏色可由《色碼表》來挑選。

CSS background-image 範例二、DIV 區塊背景圖片
<style type="text/css">
#T1{
 background-image:url('背景圖片');
 width:400px;
 height:60px;
 border:1px #ccc solid;
}
#T2{
 background-image:url('背景圖片');
 background-repeat:no-repeat;
 width:400px;
 height:60px;
 border:1px #ccc solid;
 margin-top:10px;
}
</style>
<div id="T1"></div>
<div id="T2"></div>
以上範例呈現結果如
此範例分別對兩個不同的 DIV 區塊設計背景圖片,為了能夠清楚的呈現範例的範圍,所以替 DIV 區塊加上了灰色邊框(border),由第一個 DIV 區塊可以看到 background-image 預設的背景圖片效果,會自動填滿整個區域,第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態,範例的 no-repeat 是讓圖片僅顯示一次,若要讓圖片朝垂直或水平方向重覆出現,請參閱:background-repeat

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012