情境

圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片，一方面是為了讓畫面看起來更多元、豐富，另一方面，圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容。

但有時候圖片如果加以文字的輔助說明，能夠更清楚的描述想要表達的事物。因為同一張圖片給兩個不同的人看，有可能會看成不同的意思。所以加上文字的表達，能夠讓圖片的描述更精準。

因此，在現代的網頁上，我們常常可以看見圖片和文字互相搭配著出現。

假設我們有一張圖片，上面會需要有一些文字說明，如下：

.card {
  background-image: url('https://demo/images/duck.jpeg');
  background-size: cover;
}

上面看起來的一張很正常的圖片，我們一起來想想看有什麼邊界條件會需要考慮。

你能看見多遠的未來呢？

從上圖來看，要顯示這個畫面，我們需要一張圖片和一串文字。
但我們有沒有想過，網頁上怎麼顯示圖片呢？

通常我們圖片會放在一個雲端空間上，當網頁需要這張圖片的時候，會需要將這張圖片載入。

但是問題就在這裡，因為圖片是透過網路傳輸載入的，網路很容易存在一些不穩定的因子，例如：

• 網路塞車
• 網路斷線
• 儲存圖片的雲端空間服務暫停
• 圖片的路徑改變
• 行動裝置移動到網路死角地區

因此，當上述的情況發生時，我們很有可能會載不到圖片：

我們的網站上很可能有許多的圖片，因此我們也不希望因為圖片出問題而影響網站的使用題驗。

如上圖，因為載不到圖片的關係，所以連帶上面的文字也看不清楚了，可讀性大大的降低。

添加圖片背景顏色

因此，我們可以為這個卡片添加背景顏色來輕鬆解決這個問題，而這個背景顏色，也只有在圖片載入失敗時才會顯示：

.card {
  background-image: url('https://demo/images/duck.jpeg');
  background-size: cover;
  background-color: #8BC6EC; /* 以防萬一的背景顏色 */
}

這給我們提供了一個很好的備案，第一優先當然我們能夠先顯示圖片就先顯示圖片，但當圖片無法顯示時，至少我們可以讓畫面不要看起來很奇怪，有個背景顏色代替原本的圖片，也能夠稍微挽救這種情況。

小結

本篇當中我們用一個背景顏色來以防網頁圖片載入失敗時還能夠維持一定程度的可讀性。

當然，加上一個背景顏色並不是什麼了不起的技巧，但是重點是，我們是否能夠在透過許多美麗的圖片讓網站看起來多采多姿之餘，也能夠考慮到他有可能會有壞掉的一天？能夠具備考慮到這些條件的思維，才是我們很想要傳達的內容。

我們也提供一個以防萬一的解決方案，就是給無法顯示圖片的卡片加上背景顏色。

[聊天時間]
或許有些讀者所在的地區是網路比較穩定的地區，因此可能很難會遇到圖片載入失敗的狀況，但我們不能假設使用我們產品的使用者也跟我們一樣擁有這麼優渥的網路環境。因為我們的產品不只是能服務網路條件良好的用戶。

因此，身為一個專業的前端工程師，能夠考慮到這些邊際條件，就是我們展現自己經驗和專業的所在。另一方面，除了以防萬一之外，多寫這一行 CSS 也是很貼心的舉動。

或許使用者不會因為你多寫這一行 CSS 就會在網路無法載入圖片的時候特別感謝你，不過，就像是去拔牙齒一樣，雖然打了麻藥再拔牙齒，還是有可能會痛，但是不打麻藥就拔牙齒，嗯嗯...相信必定會給人留下難忘的經驗。