部分背景图像未显示答案

【问题标题】：Section background image not showing up部分背景图像未显示
【发布时间】：2018-04-02 08:52:45
【问题描述】：

我有一个这样设置的部分：

<section id="fullpage">

</section>

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

#fullpage { 
    background-image: url("sakura.png");
}

我在根目录下有sakura.png，但是图片不显示，我只看到白屏，请问是什么问题？

编辑：我必须从背景图像中删除引号：url("sakura.png");

【问题讨论】：

是的，它在同一个文件夹中，背景颜色确实有效，但图像一直失败
您在同一目录下是否有文件“sakura.png”，作为包含此代码部分的文件？
您的问题看起来与 - stackoverflow.com/questions/21374534/… 重复。请在那里查看答案，我认为删除引号会有所帮助
CSS Background image not loading的可能重复

标签： html css

【解决方案1】：

试试这个：

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}

#fullpage {
  height: 100%;
  background-image: url('sakura.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

&lt;section id="fullpage"&gt;&lt;/section&gt;

也可以这样工作：

#fullpage {height: 100vh}
html, body {width: 100vw; height: 100vh} 和 #fullpage {height: 100%}

【讨论】：

【解决方案2】：

您需要在#fullpage 中添加宽度属性

#fullpage { 
     width:100px;
     height: 100px;
     background-image: url("sakura.png");
}

【讨论】：

【解决方案3】：

尝试像这样将 / 添加到 url：

#fullpage { 
    background-image: url("/sakura.png");
}

还可以尝试为您的部分添加高度/宽度。

【讨论】：

【解决方案4】：

尝试为部分指定高度。

#fullpage { 
     height: 100px;
     background-image: url("sakura.png");
}

【讨论】：

这对我不起作用：/ background-color 确实起作用，但我的图像一直失败
这对我来说应该可以工作，这个 css 是写在外部文件中的，你有控制台错误吗？