情境

圖片在現代網站上面所扮演的角色越來越重要。我記得有一陣子很常看見大圖片當作網站背景的設計：

或是卡片式的排版也總是會需要搭配圖片：

你能看見多遠的未來呢？

使用圖片來當作美化網站的一部分，是能夠讓網站看起來更吸睛的一個好選擇，但是在使用的時候，仍有許多值得我們留意的小細節。

以大圖片做為背景的網站為例，有時候我們往往會忘記考慮在大螢幕上查看設計的情況。在筆電上看不到的狀況，在大螢幕的時候有可能就會露出馬腳：

下面三張圖片也是，第一張黑面琵鷺的圖片在這個比例下，圖片可以完整的呈現。但第二張貓頭鷹的圖片，在垂直方向因為空間不夠，所以在下面產生了重複的圖片。第三張貓咪的圖片則是寬度不夠，所以在左右方向產生了重複的圖片。

.card-image {
  background-image: url('cat.png');
  width: 300px;
  height: 200px;
}

設置 background-repeat

background-repeat 的預設值是 repeat，所以當我們對一個區塊設定了背景圖片之後，其預設的效果就是會用同樣的圖片重複鋪滿整個區塊空間。

但在大部分現代網站設計的情境下，這樣的效果是我們不希望的，因此我們會需要記得把這個預設值拿掉：

.hero-section-background {
  background-image: url('KeelungIsland.png');
  background-repeat: no-repeat; /* 圖片背景不重複 */
}

上圖卡片的例子也是，如果我們設置了 background-repeat: no-repeat; 就能夠順利的消除重複：

.card-image {
  background-image: url('cat.png');
  background-repeat: no-repeat; /* 圖片背景不重複 */
  width: 300px;
  height: 200px;
}

不過若因為消除了重複，造成圖片沒辦法填滿我們期待的背景空間，或許此時也可以考慮設置 background-size 以及 background-position 來調整圖片顯示的方式以及位置：

.card-image {
  background-image: url('cat.png');
  background-repeat: no-repeat;
  background-size: cover; /* 保留固定比例覆蓋背景區 */
  background-position: center; /* 背景圖片水平位置與垂直位置均置中對齊 */
  width: 300px;
  height: 200px;
}

小結

今天介紹了圖片設置，我們舉了以大圖片為背景的網站，以及卡片式排版上的圖片。圖片設置並不是一個很難的功能，但是因為他很簡單，所以可能我們在趕工的時候會忽略了一些小細節。

如本文所提到，有些細節並不一定總是會出現，例如可能在我們的小筆電上開發時看起來沒問題，但是換到大螢幕上看時，發現一張圖片無法填滿螢幕空間而預設用重複的圖片來填滿，這樣的效果就不是我們所期待的。

因此，下次在開發圖片相關的功能時，記得需要再多注意這些細節，避免尷尬發生。

[經驗分享]
今天的例子造成圖片重複，其實並不是因為我們寫錯什麼語法造成的，而是因為我們忽略了 background-repeat 的預設值。

「預設值」常常是我們會容易忽略的東西，因為他是預設的，所以我們不容易一眼就發現。

要防範「預設值」造成畫面不符期待、破版，沒有別的厲害的招數，就是會需要經驗累積，要特別去記憶這些預設值。另一方面，就是在測試的時候能夠在不同條件下測試，比較能夠提早發現。