CSS | div 背景图像答案

【问题标题】：CSS | Div background-imageCSS | div 背景图像
【发布时间】：2016-01-15 13:00:38
【问题描述】：

我正在寻找工作代码的示例或对我在此代码方面做错的解释。

这里的目的是让一个 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代码

快照：

感谢所有答案。

【问题讨论】：

标签： html css background-image divide

【解决方案1】：

尝试使用希望这可以工作。

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

【讨论】：

这非常有效。我几乎可以肯定我以前尝试过，但显然没有。

【解决方案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')

【讨论】：