CSS背景圖是網(wǎng)頁設(shè)計中常用的一種效果,利用CSS可以將頁面標(biāo)題字體替換為圖片。
h1 { display: block; width: 400px; height: 100px; background: url('標(biāo)題圖.jpg') no-repeat; text-indent: -9999px; }
這里的關(guān)鍵是利用了text-indent屬性將標(biāo)題文字移出可視范圍,從而只顯示背景圖。
需要注意的是,背景圖的路徑需要正確填寫,同時為了保證SEO效果,可以在CSS中加入類似下面的代碼:
h1 { text-indent: -9999px; overflow: hidden; background-repeat: no-repeat; background-position: center top; }
其中,overflow:hidden屬性可以保證文字不會溢出,而background-position:center top屬性則可以控制圖片在標(biāo)題中的位置。如果需要將多個標(biāo)題替換為不同的圖片,可以使用類似下面的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是針對不同標(biāo)題的類名,通過對應(yīng)不同的背景圖可以實現(xiàn)不同標(biāo)題的圖片替換效果。
上一篇css背景圖定位偏移值
下一篇css背景圖怎么加超鏈接