CSS 是實現 Web 頁面美化的重要工具，其中模擬背景圖也是其常見應用之一。

什么是模擬背景圖呢？我們知道，HTML 中可以通過設置元素的 background-image 屬性來實現背景圖片的設置。但某些情況下，比如背景圖片文件較大，頁面加載速度較慢，需要減少 HTTP 請求的次數，此時就可以通過 CSS 來模擬背景圖。

模擬背景圖的原理是：通過設置元素的偽元素（pseudo-element）的 content 屬性，將需要顯示的圖片轉換為 data URI（base64 編碼的圖像），最后在 CSS 中指定背景圖。

.background{
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.background:before{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('data:image/png;base64,iVBORw0KGg....');
background-size: cover;
background-position: center center;
}

在上面的代碼中，我們先將實際需要顯示的元素 .background 設置為 relative 定位，并設置其寬高和 overflow 為 hidden。然后，我們通過偽元素 .background:before 來實現模擬背景圖。該偽元素的 content 屬性設置為空，使其不產生實際內容，然后設置其為絕對定位，并覆蓋整個 .background 元素。最后，我們通過設置偽元素的 background-image 屬性為 data URI，來加載需要顯示的圖像。

通過這種方式，我們就可以利用 CSS 中的偽元素來模擬背景圖，從而達到減少 HTTP 請求、提高頁面加載速度的效果。