阿嬤都看得懂的基礎 CSS 樣式－圖片篇

昨天我們發現在使用區塊元素呈現圖片時，無法顯示完整的圖片。我們的原圖長這樣：

結果卻只顯示了左上 小角：

會有這個結果，是因為圖片本身是有自己的寬高的。圖片的寬高未必都會和區塊的寬高符合，像上面這張圖片原本的尺寸比較大，所以上面那個 200 X 200 的區塊，就只能顯示出圖片的左上角。因此，這時候，我們就必須決定背景圖片和區塊怎麼配合；這個配合的屬性，叫作

• 背景尺寸：background-size。值可能是數字加上長度單位，但是我們比較常用的是兩個文字，cover 表示讓圖片自動覆蓋滿整個區塊；contain 則是讓整個圖片在區塊中完整顯示。

不過，我們可以想像，使用 contain 的時候，既然圖片尺寸和區塊尺寸不合，又需要讓圖片完整顯示，這時候就會出現圖片並未蓋滿區塊的狀況。那麼，這個沒被蓋滿的區塊，就會是白邊對嗎？讓我們來試試看加上 background-size: contain 看看吧！

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: contain;"></div>

結果還是和預期中不一樣啊！

該死的瀏覽器會自動重複圖片，把區塊蓋滿了。這不是我們期待的結果，所以我們必須設定背景重複：

• 背景重複：background-repeat，可以指定重複的方式，例如水平重複 repeat-x 或垂直重複 repeat-y。不過很多時候，我們需要的是不重複 no-repeat。
  那就讓我們加上 background-repeat: no-repeat 看看吧！

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: contain; background-repeat: no-repeat;"></div>

終於，出現的圖片比較接近預期的狀況了！

另外，既然使用 cover 的時候，圖片自動覆蓋滿整個區塊，就會有超出區塊不被看見的圖片部分。這時候，圖片的位置就變得非常重要，因為這會決定圖片那些地方被裁切掉。例如，上面這張圖片改為 background-size: cover 後

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: cover;"></div>

，看起來的樣子會是：

雖然不太明顯，不過圖片只顯示出最左邊的風景。

因此，我們必須設定背景位置：

• 背景位置：background-position，可以是數字加上長度單位，會把圖片的左上邊框放在距離區塊左上邊框那個長度的位置，當然也可以分開寫定 2 個數值，就會分別對應左邊框與上邊框的距離。也可以在長度數值前面加上方位，指定該方位的邊框距離。不過，比較常用的或許是 center 這個值，會把圖片與區塊的中心疊合在一起。

讓我們把上面那個區塊，設定 background-position: center 看看

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: cover; background-position: center;"></div>

果然，我們看見的就是中心的風景囉！

接著，我們要介紹一個超級重要的屬性，這個屬性是每個標籤都可以設定的。還記得昨天提到的元件推擠嗎？p 標籤對應的原件，自然會把其他元件往上下推擠出去，但是 strong 標籤不會。因此，我們是否有個屬性，決定元件的上下推擠方式呢？

當然有，不過這個屬性的名稱很奇怪，叫作

• 展示樣貌：display。值是文字，通常會用到的 4 種。分別是
  • block，會和其他元素產生上下推擠，可以設定寬高。div, p, h1 都是預設 display: block。
  • inline，不會和其他元素產生上下推擠，但是無法設定寬高。假使想設定高度，必須使用 line-height進行設定。例如前面我們用了 4 個區塊，來展現 position 的作用，其中文字能夠在區塊中垂直置中，就是因為設定了 line-height 和區塊的 height 相同。strong, span 都是預設 display: inline。
    那麼，假使我希望我的元素不會產生上下推擠，又可以設定寬高，該怎麼辦呢？我們可以設定 display 的值為
  • inline-block，不會和其他元素產生上下推擠，又可以設定寬高。值得注意的是，img 標籤是預設 display: inline-block，而非與 div 相同是 block 喔！

前面我們用了 4 個區塊，來展現 position 的作用。這 4 個區塊之所以會垂直排列，就是因為 div 預設 display: block。那麼，假使我們想把這 4 個區塊橫向排列，該怎麼辦呢？沒錯，就是設定 display: inline-block 就可以囉：

	<div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">區塊一</div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px; display: inline-block;">區塊二</div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">區塊三</div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">區塊四</div>
	</div>

我們就會得到：

最後，既然我們說過 CSS 樣式千奇百怪，與其餵各位阿嬤吃魚，不如教各位阿嬤怎麼釣魚！

工程師們在遇見問題的時候怎麼辦呢？上課？念書？太慢了吧！當然是 google 啊！不過，我們也是必須掌握查詢相關知識的鑰匙 (key)，也就是關鍵字 (key word)！繁體中文資源最齊全的，應該就是鐵人賽囉！因此，遇到任何想知道的技術，可以先搜尋那個技術的名稱加上「鐵人賽」。如果你阿嬤對於閱讀比較抽象的文字還算擅長，也可以搜尋技術名稱加上 "MDN"，不過有些頁面會是全英文喔！另外，W3Schools 這個網站上也有許多教學，部分也有簡體中文化，也可以上去看看。最後，假使遇到問題比較細，並非某個技術，就可以查 StackOverflow 這個網站，上面說不定已經有人，問過我們遇到的問題囉！

那麼，今天就差不多把基礎的 CSS 樣式都走過一次，期待明天再見囉！