iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
8
Modern Web

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

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

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 所在檔案位置 」開始,前往「圖片位置」所要經過的整段路徑,首先先來看看以下網站架構

https://ithelp.ithome.com.tw/upload/images/20201001/201125509eKWhuwUBT.png

以上面所示的架構來看,如果「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」圖檔,這時候我們的路徑就會經過三個步驟

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

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

  1. 先出家門
  2. 進入隔壁小華家
  3. 找到小華了

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

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

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

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

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

https://ithelp.ithome.com.tw/upload/images/20201001/20112550e0aMGuDSIe.png

同樣的兩個網頁檔也都要去連結「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常識,千萬不可記錯喔, 一但路徑寫錯,圖片就顯示不出來的! 所以如果新手如你,你的網頁背景圖片顯示不出來的話,請好好仔細檢查以下幾點

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

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

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

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

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

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

  1. 背景圖片的堆疊是按照順序的,先寫的則顯示在前,後寫的顯示在後,依序堆疊
  2. 背景圖片設定不要重複(repeat)
  3. 背景圖片的位置設定要錯開(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
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Background-color - 金魚都能懂的CSS必學屬性
下一篇
Background-image 之二- 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言