本地背景圖片未顯示在html中
[英]Local background image not displaying in html
問題描述
我正在嘗試為我開發的系統的HTML輸出獲取背景圖像。 我可以正確輸出頁面，但是在本地計算機上引用文件時背景圖像不能正確顯示； 但是，如果我從外部站點引用相同的圖像，則它可以正常工作。
我將html文件保存在<USER_DOCUMENTS>\\Test_HTML.html並將示例本地圖像保存在<USER_DOCUMENTS>\\images\\test_image.png 。 我在示例中使用的圖像是this ，但是可以從外部引用的任何合適的圖像都足夠。
Test_HTML.html
<html>
<head>
<style>
td{font-family:arial; font-size:12pt; border:solid black 1pt;}
.test_class{background-image:url(images\test_image.png); background-repeat:repeat; background-position:top left;}
</style>
</head>
<table>
<tr>
<td class="test_class" style="width:40pt">Baap</td>
<td class="test_class" style="width:60pt">Beep</td>
<td class="test_class" style="width:80pt">Biip</td>
<td class="test_class" style="width:100pt">Boop</td>
<td class="test_class" style="width:120pt">Buup</td>
</tr>
</table>
<hr/>
<img src="images\test_image.png"/>
</html>
在瀏覽器中進行測試（在Chrome，Firefox和IE中測試）時，水平尺下方的圖像可以正確顯示，但表格中沒有顯示背景。 但是，如果將url(images\\test_image.png)替換為url(<EXTERNAL_FILE_LOCATION>)則背景圖像將正確顯示。 所需的行為是能夠使用本地文件並獲得與使用外部文件位置時相同的輸出。
我對如何使它在本地系統上正常工作感到迷茫，不勝感激。
2 個解決方案
解決方案1
1 2017-11-23 11:33:27
將斜杠“ \\”替換為“ /”。 網址必須為正斜杠
解決方案2
1 已采納
就像我在上面的評論中提到的那樣，“ \\”或反斜杠通常用於引用路徑的絕對路徑，並且是Windows的標准，用於引用文件的位置。 我們使用“ /”或正斜杠來表示當前工作文件的相對路徑。 所以，
./表示當前工作目錄。
../指向父目錄。
./images/指的是與工作目錄位於同一位置的文件夾，同樣地，要訪問該文件夾中的文件，請在其前面加上一個斜杠以對其進行引用。
至於，為什么當您在img標簽中使用反斜杠路徑而不在CSS中使用反斜杠路徑時，它為什么起作用，我不確定。 但這不是一個好習慣，而且絕對不是正確的做事方式。 希望能幫助到你。
HTML：本地背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.