Question

即使一切正确，我的div背景图片也不会加载，只有在我输入内容时才会加载。

HTML代码〜

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&family=Roboto:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>
<body>

<div id="Header">



</div>

</body>
</html>

CSS代码

body {

    background-color: #FEF991;
    margin: 0px;
    paddng: 0px;

}

#Header {

    background-image: url("A.png");

}

文件是正确的，但所有内容都可以，但是只有在我写东西时才加载，我不知道为什么或如何修复它。

Answer 1

如果没有为容器或内容提供明确的尺寸，则容器将计算为0px。对#Header元素应用高度可以解决您的问题。

Answer 2

您的标题没有高度或宽度，默认情况下，直到您向其中添加一些HTML元素或添加样式height和width时，它才会显示，请尝试将其添加到标题样式中：

#Header {
    background-image: url("A.png");
    height: 100px;
    width: 100%;
}

工作片段：

body {
  background-color: #FEF991;
  margin: 0px;
  paddng: 0px;

}

#Header {
    background: rgba(0, 0, 0, 0.5);
    height: 100px;
    width: 100%;
}

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&family=Roboto:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>
<body>

<div id="Header">


</div>

</body>
</html>

Answer 3

这是因为div的高度为0％。每当您向其中添加一些文本时，div的大小都会增加，因此您可以看到背景图像。

HTML CSS，背景图片无法加载

3 个答案: