我在我的 HTML 页面中插入了一个背景图像，但它没有显示答案

【问题标题】：I insert a background-image in my HTML page but it does not show我在我的 HTML 页面中插入了一个背景图像，但它没有显示
【发布时间】：2021-12-16 12:54:24
【问题描述】：

我写了下面的HTML代码，插入了一张jpg图片，但是为什么页面渲染后图片没有出现？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.image {
            background-image: url("images/bg1.jpg");
        }
    </style>
</head>
<body>
    <p class="text1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, iste?</p>
    <div class="image"></div> 
    <div class="text2">Lorem ipsum dolor sit amet.</div>
</body>
</html>

enter image description here

【问题讨论】：

具有类图像的 div 的宽度和高度为零，因此不显示。你是想把图片放在两个文本 div 之间，还是只作为其中一个的背景，还是同时作为两者的背景？

标签： html css background-image

【解决方案1】：

默认情况下，div 跨越其容器的全宽，但高度为零，除非其中有一些内容。目前您的div.image 的高度为零。使用height: 100px 之类的东西指定div.image 的高度或在其中放置一个子元素。

【讨论】：

感谢您的帮助。我尝试了您的解决方案。除了在 div.image 中放置一个子元素之外，它们都对我有用

【解决方案2】：

你应该给HTML、BODY和div.image一个min-height: 100vh，那么你的背景图片也应该是可见的。

如果你真的希望它作为网站背景，你还应该设置position: absolute; top:0;left:0。

【讨论】：

谢谢。首先，我将它们提供给 html 、 body 和 div.image 以便我的背景图像可见。然后我尝试了您对 wbsite 背景的第二个建议，它又消失了?