html-背景图片未加载图片

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文件夹，在这种情况下，它是包含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-背景图片未加载图片

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-01-22 12:53:55

解决方案2
0 2018-01-22 13:36:58

html-背景图片未加载图片

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-01-22 12:53:55

解决方案2 0 2018-01-22 13:36:58

解决方案1
3 已采纳 2018-01-22 12:53:55

解决方案2
0 2018-01-22 13:36:58