背景圖像不能在任何瀏覽器上工作

我正在把背景圖像放在我的頁眉和頁腳上。當我點擊VS上的設計選項卡時，它似乎正在工作，但是當我執行Web應用程序時，背景圖像不會顯示。背景圖像不能在任何瀏覽器上工作

我的樣式表

#Header { 
    height: 150px; 
    width:1020px; 
    background-color:gray; 
    background-image:url('images\bg-image.png'); 
    background-position-x:right; 
    font-size:30px; 
    font-family:Arial; 
} 

#Footer { 
    background-color:gray; 
    background-image:url("e:\...\images\footer-image.png"); 
    width:1020px; 
    height:80px; 
    text-align:center; 
    font-family:Arial; 
    font-size:13px; 
    margin-top:5px; 
}

正如你將發現，我已經試圖改變圖片的路徑，但它仍然給我相同的結果。

我的VS圖像目錄

My VS image directory

結果執行時（我試過在IE，鉻，FF）

Result

我希望有人會幫我在這。謝謝！

來源

2014-07-11 mharbydoll

這些圖像路徑根本就不對。它看起來像是用相對路徑來混合絕對路徑。只使用相對路徑，你會沒事的。 – APAD1

這幾乎肯定是一個路徑問題。嘗試使用Web根目錄的完整路徑：

/* Assuming the images directory is in the web root.*/ 
background-image:url('/images/bg-image.png');

來源

2014-07-11 16:05:33

我試過使用那個，但仍然沒有運氣。 – mharbydoll

您的圖片位於您的網站根目錄位置？ –

呃，它位於web根目錄內。我試着用你的建議，當我輸入'/'時，我遵循智能感知，它的工作原理！也許我之前輸入了錯誤的東西。謝謝！ – mharbydoll

請勿使用url("e:\...\images\footer-image.png")。

相反，你可以嘗試file方案：

url("file:///e:/.../images/footer-image.png")

但是，你只能使用它，如果網頁使用file方案過於訪問。在您的屏幕截圖中，您使用的是http，因此出於安全原因無法使用。

那麼，最好的選擇可能是相對URL，將與http和file工作都：

url('images/bg-image.png');

注意使用斜線/，而不是一個落後的\。

來源

2014-07-11 16:08:53 Oriol

路徑名問題。輸入代碼如下：

#Header { 
height: 150px; 
width:1020px; 
background-color:gray; 
background-image:url('images/bg-image.png'); 
background-position-x:right; 
font-size:30px; 
font-family:Arial; 
} 

#Footer { 
background-color:gray; 
background-image:url("e:/.../images/footer-image.png"); 
width:1020px; 
height:80px; 
text-align:center; 
font-family:Arial; 
font-size:13px; 
margin-top:5px; 
}

來源

2014-07-11 16:10:57 Michael

背景圖像不能在任何瀏覽器上工作

回答

相關問題