在網(wǎng)頁的美化過程中,顯示本地圖片是重要的一步。除了使用img標(biāo)簽外,我們可以使用CSS來實現(xiàn)圖片的顯示。
<style> .img-container{ background: url("local-image.png") no-repeat; width: 100px; height: 100px; } </style> <div class="img-container"></div>
如上代碼所示,我們首先定義了一個CSS class "img-container",并為其設(shè)置了寬高以及背景圖片。
在設(shè)置背景圖片時,我們可以使用相對路徑或絕對路徑來引用本地圖片。相對路徑是相對于當(dāng)前CSS文件的路徑,絕對路徑則是完整的本地圖片路徑。
除了background屬性,我們還可以使用content屬性結(jié)合偽元素before或after來插入圖片。如下所示:
<style> .img-container::before{ content: url("local-image.png"); } </style> <div class="img-container"></div>
以上代碼將在img-container的前面插入一張圖片。
總結(jié)來說,在CSS中顯示本地圖片有兩種方式:設(shè)置背景圖片或使用content屬性。需要注意的是,引用本地圖片時要注意路徑問題。
上一篇ajax怎么訪問桌面文件
下一篇css顯示指定行文字