CSS

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

Answer 2

尝试使用希望这能起作用。

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

CSS | Div 背景图片

CSS | Div background-image

html

background-image

divide

绝对路径：

相对路径：