用五個小學問做自己想要的CSS背景好簡單!(4)設定背景圖樣

用五個小學問做自己想要的CSS背景好簡單!(4)設定背景圖樣

用五個小學問做自己想要的CSS背景好簡單!(4)設定背景圖樣
用五個小學問做自己想要的CSS背景好簡單!(4)設定背景圖樣

如果前端工程師是你的志業,那設定背景的圖樣也超重要!快點來學它的技巧和撇步!

除了純色背景之外,前端工程師也可以選擇使用背景圖樣設定(background-image)屬性,使用圖片取代純色作為網頁的背景。若網頁的主題不複雜的話,高質感的圖片可以讓網頁整體看起來更加豐富!使用圖片當背景需要注意網頁在不同的平台(如電腦、手機等裝置),顯示出來的效果是不一樣的!最後必須要確認背景圖片是否能夠與網頁主體和諧搭配得巧妙,且也要避免出現喧賓奪主的失誤。

背景圖樣設定 (background-image)屬性跟背景顏色設定 (background-color)屬性一樣,能夠設定的範圍除了網頁背景外,前端工程師也可以用之來設計網頁內元素,如表格、DIV 區塊、H1-H6 等的背景圖樣,更可與背景重複屬性(background-repeat)背景固定模式屬性 (background-attachment)背景圖片位置屬性 (background-position)搭配做網頁設計。

 

CSS background-image 基本語法如下:

background-image: url("圖片URL位址");

其中 url 小括號內有三種可以使用的參數,分別為 none(預設值,不顯示圖樣)、inherit(繼承自上一層的圖片)以及本例的「 url(“圖片URL位址”) 」圖片網址這三種。以下有兩個範例分別為設定整個網頁的背景圖片以及網頁內元素的背景圖片。

 

CSS background-image 語法範例一、網頁背景

background-image: url("圖片URL位址");

See the Pen background-image-example by Tedutw (@Tedutw) on CodePen.

 

CSS background-image 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景圖案設定

div(可替換成 h1、p 等網頁元素標籤){background-image: url("圖片URL位址");}

See the Pen background-image-content-example by Tedutw (@Tedutw) on CodePen.

以上的範例中有兩個不同的 DIV 區塊,由第一個 DIV 區塊可以看到 background-image 預設的背景圖片,若背景圖片尺寸小於 DIV 區塊時,圖片則會自動重複到填滿整個區域。而第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態只能沿著垂直方向重複。相關設定請參閱3. 背景重複設定 (background-repeat)

 

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

 

延伸閱讀:

用五個小學問做自己想要的CSS背景好簡單!(2)背景位置設定

用五個小學問做自己想要的CSS背景好簡單!(3)背景重複模式

用五個小學問做自己想要的CSS背景好簡單!(5)設定背景顏色

除了網路行銷課程以外,2018你還應該開始學這個

學寫網頁前一定要搞清楚前端工程師和後端工程師哪裡不同!

大數據也能分析出肥胖原因 學Python課程讓你跨出第一步

NOWnews 今日新聞

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料