Question

我正在学习如何制作一个简单的全屏着陆页，我在加载背景图片时遇到了一些问题。

目录结构：

 fullscreen_test/
 ├── css/
 |   │   
 |   └── landing.css
 ├── images/
 │   └── warehousing-04.jpg
 └── index.html

的index.html

<html>
    <head>
        <title>Landing Page</title>
        <link rel="stylesheet" type="text/css" href="css/landing.css">
    </head>
    <body>
        <section class="landing">
            <div class="container">
                <div class="content">
                    <h1>Testing</h1>
                    <a class="btn" href="#">What Up</a>
                </div>
            </div>
        </section>
        <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
    </body>
</html>

landing.css

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.landing {
    height: 100%;
    width: 100%;
    background-image: url("/images/warehousing-04.jpg") no-repeat;
}

我已尝试将网址放在双引号，单引号和无引号中，但仍然没有任何乐趣。尝试在路径前添加/并将其取走，结果相同。尝试使用background标签，也没有任何结果。只是图像应该是一个很大的空白区域。也许有人可以看到我正在犯的错误，因为我不能，而且我现在已经看了一个小时了。

感谢您提供的任何帮助。

Answer 1

我为此创造了一个小提琴。看看

https://jsfiddle.net/cooltammy/c2z2khLq/

只需使用已更改的CSS

.landing {
    height: 100%;
    width: 100%;
    background-image: url("../images/warehousing-04.jpg");
    background-repeat: no-repeat;
}

Answer 2

解释，为什么你的方法不起作用。

查看文件夹结构：

 fullscreen_test/
 ├── css/
 |   │   
 |   └── landing.css
 ├── images/
 │   └── warehousing-04.jpg
 └── index.html

您的尝试

background-image: url("/images/warehousing-04.jpg");

不起作用，因为/会返回root文件夹，在这种情况下是＆＃34;文件夹＆＃34;包含fullscreen_test。因此，您告诉您的css从名为images的文件夹加载图片，该文件夹与fullscreen_test处于同一级别。该文件夹不存在。

第二种方法，在开头删除斜杠：

background-image: url("images/warehousing-04.jpg");

现在你告诉css从css所在的同一文件夹中的文件夹images加载图片。再次，这个文件夹不存在。

正确的解决方案：

background-image: url("../images/warehousing-04.jpg");

从css文件夹中上升一级（由..表示），因此我们回到fullscreen_test。现在我们进入文件夹images（确实存在于fullscreen_test下），然后加载图片。

第二个选项

background-image: url("/fullscreen_test/images/warehousing-04.jpg");

也可以，但它要求您提供fullscreen_test个文件夹。从名称来看，它将来会被删除或重命名，因此它不像其他解决方案那样好。

html - background-image not loading image

2 个答案: