Question

我有一个div，类名为“包装器”。当我尝试在CSS中向其添加背景图片时，它不会显示，但是当我将其添加至正文时，该图片就会显示出来。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Login Page</title>
        <link rel="stylesheet" href="Custom.css">

        <style>
            .wrapper{
                width: 100%;
                height: 100%;
                background-image: url(login-register.jpg);
            }
        </style>
    </head>
    <body>
        <div class="wrapper"></div>
    </body>
</html>

Answer 1

在给定的示例中，渲染后的.wrapper高度为0px，因此背景图像只是不可见。高度的百分比是相对于其父级的-因此，如果父级的高度为0，则子级的高度也将为0（只要子级中没有高度的元素）。

您可以添加min-height: 100vh或min-height: 300px使其起作用。

Answer 2

这对我有用：）

.wrapper{
     width: 100%;
     height: 100vh;
     background-image: url(login-register.jpg);
}

背景图片不显示

2 个答案: