CSS background-image 背景圖片

CSS background-image 背景圖片設計語法可以幫網頁設計師提升網頁的精緻度,因為單純的背景顏色可能太過單調,這時候就可以自己準備好比較有設計感的圖片,當成網頁背景圖片,來襯托整個網頁內容。當然 background-image 的功用不僅止如此而已,還可以替許多網頁內的不同元素增加背景圖片唷!像是 DIV 區塊、textarea 文字輸入欄位都常用到 background-image 的特效,在這篇 css 背景圖片設計介紹內,我們將用 background-image 替這些元素增加背景顏色,先來看基本語法規則吧!

CSS background-image 語法規則
background-image:url( 將你的圖片網址放在這裡 );
語法非常的簡單,就是把準備好的背景圖片網址(url)放到小括號內即可,不過不要亂放圖片,例如盜用別人的圖片就是絕對不可以的做法,另外,要確定圖片是否可以正常顯示或是圖片所在主機是否有提供外連,如果能將圖片放在自己的網頁伺服器上最好。

使用背景圖片還有一個重點要注意,就是圖片的尺寸,與搭配的"容器"要符合,整體才會漂亮,例如放在 300x300 的 DIV 區塊內,圖片尺寸就要設計成 300x300 的大小,這樣才能剛好滿版。當然,如果打算使用 background-positionbackground-repeat 這些語法來調整背景圖片呈現的位置,則圖片尺寸大小就不一定受限於容器的大小,接著來看兩個範例。

CSS background-image 範例一、替 DIV 區塊增加背景圖片
<div style="background-image:url(背景圖片);width:380px;height:120px;">
這個 DIV 區塊使用 300x120 的背景圖片
</div>
呈現效果
這個 DIV 區塊使用 300x120 的背景圖片
範例一在 DIV 區塊的開頭標籤內使用 css 的 style 宣告用 background-image 加入背景圖片,而且 DIV 區塊的大小寬度為 380px、高度為 120px, 讓背景圖片與 DIV 區塊大小剛剛好吻合,背景圖片的漸層效果就顯得非常的漂亮。

CSS background-image 範例二、替 textarea 文字輸入欄位增加背景圖片
<textarea style="background-image:url(背景圖片);width:380px;height:120px;"></textarea>
呈現效果
範例二的 css 語法與範例一是完全一樣的,只是套用在不同的網頁元素中,像範例二這樣就可以很輕易的幫 textarea 文字輸入欄位做一點美化,而且比單純的使用 background-color 還有質感些。想一想還有哪些網頁元素可以使用 background-image 來美化吧!

延伸閱讀
© Copyright webtech.tw Since 2010