在網絡世界里，各種元素交錯在一起，構成了精彩紛呈的網頁。其中，圖片是讓網頁更加生動、圖像更加豐富的一大元素。但是，當圖片未能及時加載完成時，網頁將顯得十分空洞、毫無生氣。針對這一問題，CSS提供了一種優雅的解決方式，即“圖片未加載完成時”的背景。

img{
display: none; /*將原有圖片隱藏起來*/
}
.placeholder{
width: 300px; /*設置占位框的寬和高*/
height: 200px;
background-color: #f3f3f3; /*設置占位框的背景色*/
}
.placeholder::before{
content: " "; /*使用偽元素來添加圖片占位符*/
display: block;
width: 50px;
height: 50px;
background-image: url('loading.gif'); /*設置圖片占位符的背景圖*/
background-size: cover;
background-position: center;
margin: 75px auto; /*調整位置*/
}
img.loaded{
display: block; /*當圖片加載完成后，顯示圖片*/
}
img.loaded + .placeholder{
display: none; /*同時，隱藏占位框*/
}

以上代碼中，我們將原有的圖片隱藏起來，并使用一個占位符（placeholder）來替代原來的圖片。占位符的寬、高和背景色可以根據實際需要進行調整。另外，為了讓占位符更加生動，我們使用了一個旋轉的loading小圖標，將其作為占位符的背景圖。

當圖片加載完成后，我們通過在img元素上添加“loaded”類，來顯示原來圖片的真實內容，并隱藏占位符。通過這種方式，即使圖片的加載速度較慢，也能使網頁看起來更加完整、生動。