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')