在前端开发中，我们使用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来让页面更加美观和有趣。