Question

我想制作一个页面，通过向下滚动，内容div，覆盖背景图像。所以我为身体放置一个背景图像并创建2个div，它在大窗口大小工作，但当我改变窗口的大小，并使其更小（以测试响应），图像和内容div之间存在白色差距。

请你帮我删除它吗？

       <html>
        <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>first</title>

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
                <link href="css/first.css"  rel="stylesheet">

        <style>

        body{

            background: url("https://kalamarie123.files.wordpress.com/2012/03/img_7815-2.jpg") no-repeat top center fixed;
            background-size:100%;


        }


        </style>
        </head>


        <body>

        <div class="cover"></div>
        <div class="content">Lorem Ipsum is simply dummy text of </div>   

        </body>
        </html>



.cover{
    height: 1232px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;

}
.content{
    width: 100%;
    height: 100%;
    background: gray;
    margin: 0;
    padding: 0;
}

Answer 1

您需要将正文和html放在页面底部：

body, html {
    min-height: 100%;
}

然后将背景设置为background-size: cover;：https://css-tricks.com/perfect-full-page-background-image/

Answer 2

你可以这样做：

<div id="yourdiv"></div>

#yourdiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

希望它有所帮助！

Answer 3

听起来可能是因为你的背景图片没有填满整个空间。

尝试将其添加到正文（带有BG图像的元素）;

background-size:cover;

请注意，这在旧版浏览器上效果不佳

如何使用css创建一个页面，背景图像覆盖，滚动和响应？

3 个答案: