不顯示背景圖像

我是一般的HTML和CSS的新手。請幫我看看代碼。我無法讓背景圖像出現在我的瀏覽器中，但我正確輸入了語法。我得到的只是一個橙色盒子，沒有alert.png圖片。我正在關注在線教程btw：http://dev.opera.com/articles/view/31-css-background-images/#thecode 不顯示背景圖像

編輯1：圖像，html文件和css文件都在同一個文件夾內。但沒有成功。

編輯2：我使用了一個獨特的css文件名，而不是通用的「style.css」（我的系統中有幾個），它的工作原理！確保url和括號之間沒有空格。

HTML代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <meta http-equiv="Content-Type" content="text/html; 
     charset=utf-8"> 
     <title>alert message</title> 
    </head> 

    <body> 
<p class="alert"> 
    <strong>Alert!</strong> 
    This is an alert message. 
</p> 
    </body> 
</html>

CSS代碼：

.alert { 
width: 20em; 
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png); 
background-color:orange; 
margin: auto; 
padding: 2em; 
}

來源

2012-01-03 uohzxela

您的代碼按原樣運行。確保圖像在你期望的位置。檢查它是否可訪問並且權限不是問題。見：http://jsfiddle.net/UWFcL/ – xbonez 2012-01-03 04:23:17

嘿，你是什麼意思的權限？我將圖像放在與html文件相同的文件夾中，但我無法使其工作。 – uohzxela 2012-01-04 02:13:14

如果它在與html文件相同的文件夾中，權限不應該是一個問題。嘗試使用Ramon提到的引號 – xbonez 2012-01-04 03:18:31

URL必須是一個字符串：

url("C:\Documents and Settings\USER\My Documents\alert.png");

來源

2012-01-03 04:21:28

不需要字符串也可以：http://jsfiddle.net/UWFcL/ – xbonez 2012-01-03 04:22:33

您的網址沒有「空格」，因此它的工作原理不是字符串。他的網址在這裏有一個空格：\ My Documents \因此它必須是一個字符串。 – 2012-01-03 04:38:11

啊，是的。你是對的。 – xbonez 2012-01-03 05:13:52

我想這是一個權限問題，不管你最當你將這個URL移動到服務器時，可能有URL是文件引用的問題，我建議將你的圖像移動到服務器同一位置（或更好，但在您的網站的根目錄的圖像文件夾）作爲你的HTML文件，然後修改你的CSS是這個

.alert { 
    width: 20em; 
    background-image: url('/alert.png'); /* '/images/alert.png' */ 
    background-color:orange; 
    margin: auto; 
    padding: 2em; 
}

來源

2012-01-03 04:24:23 Robert

我將它添加到'images'文件夾中，然後將它放在與html和css文件相同的文件夾中。但無法使用url（'alert.png'）/ url（'/ images/alert.png'） – uohzxela 2012-01-04 02:23:29

我認爲你有權限問題。你是否在本地Web服務器或託管環境中運行此操作？ – Robert 2012-01-04 02:35:05

我沒有運行任何我知道的服務器。我只是創建HTML和CSS文件，並使用Firefox運行HTML文件。 – uohzxela 2012-01-04 02:51:54

做事情的另一種方法是把你的文字變成股利，並如用css div的背景圖片設置圖像，就像這樣：

<div class="alert"> 
    <p> 
    <strong>Alert!</strong> 
    This is an alert message. 
    </p> 
</div>

而且，對於CSS：

.alert { 
    width: 20em; (Width of entire div, which includes text and bg image) 
    background-image: url('../alert.png'); 
    background-color: orange; 
    margin: auto; 
    padding: 2em; 
}

你可以在這裏看到現場的jsfiddle例如：http://jsfiddle.net/Cwca22/TdDJY/

此外，在上面的代碼中，背景圖片將水平和垂直平鋪（重複）以填充div的空間。爲了防止這種情況發生，可以使div的高度和寬度與背景圖像相同，或者將background-repeat: no-repeat放在您的css下的.alert類中。

希望這會有所幫助，祝你好運！

來源

2012-01-03 05:05:23

我跟着你的代碼與格式。但仍然沒有成功。 – uohzxela 2012-01-04 02:30:24

該代碼似乎對我來說工作正常 - 你的映像地址是否正確？如果您的網站位於名爲「Foo」的文件夾中，並且您嘗試引用該文件夾中的圖像，則始終可以使用格式。「../」表示「從站點的根文件夾開始，然後導航到文件」而不是「導航到文件」。 – 2012-01-04 02:38:15

請檢查您的URL，如果可能的話，您可以使用firebug這是Firefox的插件，它一定會幫助您，通過指示圖像是否已加載。

否則如下

.alert { 
    width: 20em; 
    background-image: url('/alert.png'); /* '/images/alert.png' */ 
    background-color:orange; 
    margin: auto; 
    padding: 2em; 
    height: /* height of image*/ 
}

來源

2012-01-03 05:11:09

我試過給10px的高度，但沒有成功。 – uohzxela 2012-01-04 02:27:04

它適用於我..我的意思是你檢查圖像路徑是否正確或不正確。你有沒有試過螢火蟲來檢查圖像是否已經加載或沒有。 – 2012-01-04 05:00:51

首先把你的alert.png畫面在同一文件夾作爲HTML文件中的另一個解決辦法是給予高度快訊類。

然後在你的CSS文件試試這個：

body { 
    background: orange url("alert.png") no-repeat; 
}

我認爲這個問題是「\」的\ alert.png

祝你好運！

來源

2014-07-27 14:18:59 user3073117

在他在CSS

背景圖片有原題：URL（C：\ Documents和Settings \ USER \我的文檔\ alert.png）;

我遇到了一個畫廊頁面，有圖像作爲背景縮略圖的問題。任何有空格的圖像文件名都不會出現。只是這樣一個事實是，一幅圖像碰巧代替了空格，並且確實顯示出我能夠追蹤它。由於他的網址中有空格，這可能是問題所在。我通過使用\來修復我的問題，以避免導致問題的空間字符。即

A \空間\ IN \中\ filename.jpg

雖然這可能無法在Windows路徑名工作！如果圖像與腳本位於同一個目錄中，則無論如何都不需要完整的url。

來源

2015-08-09 16:19:51 M61Vulcan

不顯示背景圖像

回答

相關問題