CSS | Div背景圖片

Question

我正在尋找工作代碼的示例，或者我對該代碼做錯了什么的解釋。

此處的目的是讓div在覆蓋div下方的文本和按鈕后面顯示一個圖像。 該圖像將由“ div.imageBack”顯示，在“ div.overlay”之后將顯示為暗色。

HTML完全由一個CSS文件（main.css）控制，我提供了我認為相關的文件。 還包括相關的HTML和當前的HTML快照。

如果需要，可以提供更多。

home.html

<div class="imageBack">
<div class="overlay">
    <center> 
        <p class="headerLarge">Discover Your Past</p>
        <a class="button" href="start.html">
            <div class="button">
                <p class="button">Start Now</p>
            </div>
        </a>
    </center>

</div>

main.css

div.overlay{
height: 1000px;
margin-left: -10px;
margin-right: -10px;
margin-top: -75px;


background: linear-gradient(rgba(0, 0, 0, 0.8) 50%, rgba(77, 166, 255, 1));


}

div.imageBack{
 height: 1000px;
 margin-left: -10px;
 margin-right: -10px;
 margin-top: -75px;


 background-image: url('C:\Users\iixCarbonxZz\Documents\html and javascript\Holmes & Watson [Mr Osbourne]\img\body\forest.png')
}

目前的HTML代碼

快照：

所有的答案表示贊賞。

Answer 1

嘗試使用希望這可以工作。

background-image: url('../img/body/forest.png');

Answer 2

您有以下代碼：

background-image: url('C:\Users\iixCarbonxZz\Documents\html and javascript\Holmes & Watson [Mr Osbourne]\img\body\forest.png')

這不是一個好主意，但是，如果您要從硬盤驅動器讀取具有絕對路徑的圖像（具有相對路徑，則不會出現此問題），請設置協議file://

絕對路徑：

background-image: url('file://C:\Users\iixCarbonxZz\Documents\html and javascript\Holmes & Watson [Mr Osbourne]\img\body\forest.png')

相對路徑：

background-image: url('img/body/forest.png')