CSS背景圖是網頁設計中常用的一種效果，利用CSS可以將頁面標題字體替換為圖片。

h1 {
display: block;
width: 400px;
height: 100px;
background: url('標題圖.jpg') no-repeat;
text-indent: -9999px;
}

這里的關鍵是利用了text-indent屬性將標題文字移出可視范圍，從而只顯示背景圖。

需要注意的是，背景圖的路徑需要正確填寫，同時為了保證SEO效果，可以在CSS中加入類似下面的代碼：

h1 {
text-indent: -9999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center top;
}

其中，overflow:hidden屬性可以保證文字不會溢出，而background-position:center top屬性則可以控制圖片在標題中的位置。如果需要將多個標題替換為不同的圖片，可以使用類似下面的CSS代碼：

h1.title1 {
background: url('title1.jpg') no-repeat center top;
text-indent: -9999px;
height: 100px;
width: 400px;
}
h1.title2 {
background: url('title2.jpg') no-repeat center top;
text-indent: -9999px;
height: 120px;
width: 500px;
}

這里的.title1和.title2是針對不同標題的類名，通過對應不同的背景圖可以實現不同標題的圖片替換效果。