今天在網路上看到一 篇文章，說交你如何設計出好看的叉燒包（又或者是圖片壞掉時要怎麼優化使用者體驗）。
小編今天就手把手邊學邊寫，希望對大家有幫助！
首先，img 這個屬性是這樣的：
- 我們可以將跟文字有關係的放在 img 的標籤上
- img 這個標籤是個可以取代性元素，所以 :before 跟 :after 通常在 img 上是無效的，但是，當圖片消失或無法載入的時候，偽元素就可以使用。
來練習看看
先知道圖片是壞掉了
以下我們可以知道這個圖片是壞的
JS Bin on jsbin.com
使用文字資訊
但是我們可以依以下的方式呈現
JS Bin on jsbin.com
取代文字
若要用其他方式的話… 我們就用 icon 取代文字吧！
JS Bin on jsbin.com
更多設計方式
要是圖沒有壞掉的話，基本上偽元素是無法呈現的，所以… 酷吧！
JS Bin on jsbin.com
瀏覽器支援
瀏覽器支援度？呵呵…..
好啦，其實你可以略過以下，簡單的來說，桌面版的主流瀏覽器都符合，IE 我沒測試啦… 手機版好像有點問題。
| Browser | Alt Text | :before | :after |
|---|---|---|---|
| Chrome (Desktop and Android) | ✓ | ✓ | ✓ |
| Chrome (iOS) | ✓ * | ✗ | ✗ |
| Safari (Desktop and iOS) | ✓ * | ✗ | ✗ |
| Opera (Desktop) | ✓ | ✓ | ✓ |
| Opera Mini | ✓ ** | ✗ | ✗ |
| Firefox (Desktop and Android) | ✓ | ✓ | ✓ |
| Firefox (iOS) | ✓ * | ✗ | ✗ |
* 如果圖片大小允許的話，alt 文字會呈現，若圖片上沒有寬度設定的話，則有可能不會出現
** 無法接受 font 的樣式（其實 Opera 我都是直接略過的）
翻自於 Bits of Code 外加自己的加油添醋