Background-image 之一 - 金魚都能懂的CSS必學屬性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 16

Modern Web

金魚都能懂的CSS必學屬性系列第 16 篇

Background-image 之一 - 金魚都能懂的CSS必學屬性

12th鐵人賽金魚都能懂網頁教學 css css教學

CSScoke

2020-10-01 22:28:31

47705 瀏覽

Background-image 的規則

background-image作用是設定背景圖片，其撰寫方式像是這樣

background-image: url("amos.png");

背景圖片的設定，在不控制大小的情況下，預設就是原始圖片大小，且圖片僅會顯示在區塊的範圍內，也就是說當圖片太大張的時候，圖片將會發生裁切的情形。另外，當同時設定了background-color與background-image的時候，background-image將會蓋住background-color，background-image支援的值有以下幾種

url( )
linear-gradient( )
radial-gradient( )
repeating-linear-gradient( )
repeating-radial-gradient()
Inital
Inherit

Background-image 的 url

背景圖片的url所要撰寫的是圖片檔案所在的位置，你可以使用絕對路徑與相對路徑，絕對路徑指的大概像是以世界為空間所指出的詳細位置，像是「太陽系地球台灣新竹縣可樂鄉網頁路87號」這樣，如果換成網路世界的話就是完整的網址了，就像「http://csscoke.com/wp-content/uploads/2015/07/special_album_done_small.jpg 」這樣，可以看到網址到資料夾的名稱都寫得一清二楚的。另一種則是相對路徑，所謂的「相對」，就是「該段CSS background-image 所在檔案位置 」開始，前往「圖片位置」所要經過的整段路徑，首先先來看看以下網站架構

以上面所示的架構來看，如果「index.html」與「about.html」兩個網頁檔都連結了CSS資料夾中的「style.css」檔案，大概會像下方第六行這樣去連結

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<p>...略</p>
</body>
</html>

接著我們要在「style.css」中要設定去連結「pic」圖片資料夾中的「01.jpg」圖檔，這時候我們的路徑就會經過三個步驟

離開CSS資料夾到上一層空間
進入pic資料夾
找到01.jpg圖檔

其實啊，換成日常生活空間的概念其實也是完全一樣的，例如你的名字叫做小明，你要去找住在隔壁的小華，那麼你就要

先出家門
進入隔壁小華家
找到小華了

這就是從自身位置去找對方的概念，也就是相對路徑的概念。把以上尋找圖片的路徑轉換成原始碼的話，就會是

離開CSS資料夾到上一層，寫成「../」
進入pic資料夾，只要寫資料夾名稱就可以了，所以寫成「pic」
找到01.jpg，只要寫檔名就好，所以寫成「01.jpg」

把以上整個過程串起來的最終結果就是完整的相對路徑了，所以會寫成「../pic/01.jpg」，所以我們的CSS就會寫成這樣

background-image: url("../pic/01.jpg");

那麼如果我們換個結構，CSS樣式檔是寫在跟HTML檔案同一層的話呢？像是下面這樣的網站結構

同樣的兩個網頁檔也都要去連結「style.css」這個樣式檔，因為HTML檔案跟CSS檔案在同一層(同一空間)內，所以他們的原始碼就會長的像下方原始碼第六行這樣

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>...略</p>
</body>
</html>

而CSS檔案中要連結01.jpg圖檔的話，因為style.css跟pic資料夾在同一空間(層)內，所以我們寫的CSS原始碼就會像是下方這樣

background-image: url("pic/01.jpg");

是不是少掉了「../」這一段呢，因為我們不像之前需要離開資料夾往上一層移動，所以直接寫資料夾名稱就好了。背景圖片的路徑是很重要的一個CSS常識，千萬不可記錯喔， 一但路徑寫錯，圖片就顯示不出來的！ 所以如果新手如你，你的網頁背景圖片顯示不出來的話，請好好仔細檢查以下幾點

圖片路徑有無寫錯
圖片檔名有無寫錯
圖片是否有存在該路徑資料夾位置中
圖片路徑有無使用了全形字
圖片是否採用正確的RGB色彩模式
HTML檔案中的區塊是否有足夠的空間可顯示你的背景圖片
(就是不要寫一個寬度0高度0的區塊啦，這樣看的到背景圖真的就很神奇了)

以上幾點是新手背景圖顯示不出來時的檢查要點，請千萬記住圖片顯示不出來時請先自我診斷一下，不要老是直接跑去問前輩或是問林老師，雖然林老師卡好，這是大家都知道的，林老師雖然是世界上最棒的老師，但林老師遇到這樣的問題時還是會覺得...Errrr...就醬，記得檢查好就對了啦！(謎：不要問我林老師是哪位？)

多重背景功能讓一個物件內可有多張背景圖

自從CSS3問世之後，瀏覽器就開始支援可以在一個區塊內有多張背景圖的功能，當然！部分IE還是不支援（別勉強它吧），要對一個物件設定多張背景圖的話，我們可以使用一個逗號將圖片的url隔開，這樣就能做到了，像是這樣寫

background-image: url("01.jpg"), url("02.jpg"), url("03.jpg");

可以看到一個background-image中寫了三張背景圖的url，並在每個url之間使用了逗號做區隔，心急的你可能這時後馬上就跑去測試了，別急！如果你沒注意下面幾點的話，你的多重背景圖片可能還是看不出來的。

背景圖片的堆疊是按照順序的，先寫的則顯示在前，後寫的顯示在後，依序堆疊
背景圖片設定不要重複(repeat)
背景圖片的位置設定要錯開(position)

瀏覽器本身對於背景圖的設定，預設是會自動重複的，也就是預設是repeat，所以我們需要添加一個no-repeat給它，這樣才可以讓它不會自動鋪滿整個物件範圍。再者由於會有圖片堆疊順序的關係，若第一張圖片的尺寸大於第二張圖片的話，則第二張圖片會被第一張蓋住，你就看不到第二張圖片啦！所以依據這樣的問題，我們就繼續增加兩行尚未講解的設定，來搞定這狀況吧

background-image: url("01.jpg"), url("02.jpg"), url("03.jpg");
background-repeat: no-repeat;
background-position: left top, right bottom, center center;

搞定！快去玩看看吧！

Background-image 可以設定漸層

漸層背景是一個大家都喜歡的功能，也因為有了漸層背景，所以網路世界突然變得美好了起來......嗎？今日稿擠，就讓我們下回講解吧...(喂！)

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧