在前端開發中，我們使用CSS來美化頁面的同時也會經常遇到圖片加載失敗的問題。當圖片加載失敗后，頁面上會出現一個空白的區域，影響了頁面的美觀度以及用戶體驗。為了解決這個問題，我們可以使用一些技巧來占位。下面我們來介紹一些CSS圖片加載失敗占位的技巧：

// 使用偽元素
img::before {
content: "Failed to load image";
display: block;
font-size: 12px;
color: #999;
background: #f5f5f5;
border: 1px solid #ccc;
text-align: center;
height: 100%;
width: 100%;
}
//使用背景圖片
img {
background-image: url('default-image.jpg');
background-repeat: no-repeat;
background-position: center center;
}
//使用data URI
img {
background: url('data:image/svg+xml,') center center no-repeat;
color: #999;
}
//使用SVG
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#f5f5f5" />
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="24" fill="#999">Failed to load image</text>
</svg>

以上是一些常用的CSS圖片加載失敗占位技巧。當然，對于不同的場景和需求，我們還可以自己發揮創意，使用CSS來讓頁面更加美觀和有趣。