<div> 不显示背景图片

Question

在我的 css 文件中，我有一个名为“homehero”的 ID，它显示背景图片。

#homehero 
    {
        background-image: url("images/coast.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

在我的 html 文件中，我有一个 div 使用此 id 来显示图像；然而，图像并没有出现。

<div id="homehero"> <!-- Home Page Image -->
    <!-- <img src="images/coast.jpg" width="100%" height="100%" alt="A Sunny Coastline"> -->
    <!-- Old line of html that displayed the same image, but converted to css id. -->
</div> <!-- End of Home Page Image -->

可以找到完整的 html 文件 here。

可以找到完整的 css 文件 here。

编辑：将图片设置为其他元素的背景图片时显示图片，仅此id出现问题。

Answer 1

请输入宽度和高度 width:100%； height:100vh;

#homehero 
    {
        background-image: url("images/coast.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width:100%; 
        height:100vh;
    }

Answer 2

以下是我建议您尝试的一些方法：

尝试设置背景大小。（而不是 %，尝试将其设置为 px。）大多数时候，应用背景图片，但是因为我们的 div 有没有维度，我们无法查看。
Double-check 您的图片文件位于图像文件夹中。
检查图片的扩展名并确保您在代码中使用的是正确的扩展名。
使用开发工具检查元素并查看背景属性是否被另一个 CSS 规则覆盖。

如果上述 none 方法有效，请尝试通过从 Internet 复制图片地址而不是提供文件夹路径来粘贴图片的真实 URL。此方法在 90% 的情况下都有效。

Answer 3

您似乎在背景图片中输入 url，背景尺寸使用 background-size: cover;

如果您的 url 地址正确，请尝试添加

width:100%; 
height:100vh;

Answer 4

我推荐使用内联作用域css，希望对你有用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="#homehero {.css">
    <style>
        #homehero {
        background-image: url("image/image.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
       
        }
    </style>
</head>
<body>
    <div>
        <div id="homehero">
           
        </div>
    </div>
   
</body>
</html>

这可能就是它会发生的原因 https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/#:~:text=As%20Inline%20has%20the%20highest,sheets%20have%20the%20least%20priority.

Answer 5

我建议进行以下更改，

#homehero 
    {
        background-image: url("images/coast.jpg");
        width:300px; 
        height:300px;
        background-size: cover;
        background-repeat: no-repeat;
    }

其中，您的图片将被覆盖，如果您指定宽度和高度，那将是很好的，而且您的图片将不会重复，因为使用 no-repeat 属性。

<div> 不显示背景图片

<div> not displaying background image

html

css

image