使用樣式表時未在HTML上調用背景圖像

大家好我有一個快速問題。我正在學習使用Visual Studio 2012的HTML和CSS。我試圖讓多個背景嘗試視差效果類型的東西。我知道CSS可以有多種背景，像這樣：使用樣式表時未在HTML上調用背景圖像

background: url("/file/image.png"), url("/file/images2,png"), etc.....

但是我試圖做的是調用使用div id選擇圖像，像這樣

#image1 { background:url ("/file/image.png");} 


    #image2 { background: url ("/file/image2.png");}

HTML

<body> 

    <div id="image1"></div> 
    <div id="image2"></div>

每次運行下面的代碼時，我都沒有在屏幕上顯示任何內容。我唯一一次得到的東西是，如果我把代碼放在body {}上。我是否錯過了一些東西，或者VS 2012沒有正確設置？

感謝

來源

2012-11-11 user1816792

我想你錯過了「下面的代碼」 –

當使用外部樣式表時，圖像的路徑與CSS文件相關，而不是鏈接到它的HTML頁面。你確定路徑是否正確，背景圖片是否顯示在頁面的資源中（使用瀏覽器的網頁開發工具）？ –

定義的高度和寬度圖像在你的CSS風格

#image1 { background:url ("/file/image.png"); height: xxxpx; width: xxxpx;} 
#image2 { background: url ("/file/image2.png"); height: xxxpx; width: xxxpx;}

來源

2012-11-12 00:06:54 admoghal

的div標籤在默認情況下是在它的內容的高度。如果你沒有div的內容，那麼它的高度爲零。您可能需要手動將圖像的高度添加到div標記：

div#image1 { height: 200px; /* Height of image.png */ } 
div#image2 { height: 300px; /* Height of image2.png */ }

來源

2012-11-11 23:48:40

它不是Visual Studio。如果您使用的背景圖片中沒有包含任何內容，那麼您的div元素無法根據其大小來製作內容。

您可能需要在您的div元素上設置固定尺寸，或者在其中放置足夠的內容以便它們的尺寸適當。

來源

2012-11-11 23:49:15

其實，你只需要仔細檢查你的圖片的位置。

在行：

#image1 { background:url ("/file/image.png");}

在CSS中，URL是相對於這個樣式表的位置。在Visual Studio 2012中，如果您的.css文件是一個文件夾中，你的圖像是在同一級別的其他「文件」文件夾，你會寫爲：

#image1 { background:url ("../file/image.png");}

來源

2012-11-12 00:03:01 Neps

謝謝大家的所有快速回復。關於寬度和高度的所有答案在我的代碼和圖像上都能正常顯示。

謝謝。

來源

2012-11-12 15:35:08 user1816792

使用樣式表時未在HTML上調用背景圖像

回答

相關問題