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

Question

我写了下面的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

Answer 1

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

Answer 2

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

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

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

I insert a background-image in my HTML page but it does not show

html

css

background-image