Question

尝试在工作中制作目标网页。由于某种原因，背景图像不显示在这里是相关的html和CSS。

<div class="jumbotron">
    <div class="top-bar">

        <div class="top-bar-left"><img src="img/AzlanLogo.png"></div>
        <div class="top-bar-right"><img src="img/MicrosoftLogo.png"></div>

    </div>

    <div class="header-container">
    <div class="header-left"></div>

    <div class="header-right"><p><a class="btn btn-primary btn-lg" href="#" role="button">Download file</a></p>
        <p><a class="btn btn-primary btn-lg right" href="#" role="button">E-mail to friend</a></p></div>
    </div>

</div>

和CSS

.header-container {
    background-image: url('img/bg-header.png');
    height: 229px;
    width: 1013px;
    margin: 0px auto;

}

.header-left {
    width: 30%;
    float: left;
}

.header-right {
    width: 70%;
    float: right;
}

在google开发工具中检查并且图片网址是正确的。虽然，我无法弄清楚为什么图像不显示？

希望能为答案提供足够的信息。

Answer 1

当我链接到我自己的资产时，您的代码似乎有效。

您的资产路径很可能不正确，请尝试将完整域添加到规则中：

background-image: url('http://www.yourdomainhere.com/img/bg-header.png');

如果这不起作用，请在<head>内容后进行调试。

Answer 2

如果您提供的代码在线，存储在Web托管或在XAMPP / MAMP等服务器上本地编辑，您的图像路径应如下所示：

注意：这适用于您的HTML。在CSS中，您当前的默认url（）应该正常工作。

<img src="../img/AzlanLogo.png">

../之前的img/AzlanLogo.png告诉浏览器返回并在主目录中搜索img文件夹，然后找到指定的文件。

背景图像不显示在div内

2 个答案: