如何使用css制作頁面，背景圖像是cover，同時具有滾動和響應能力？

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制作頁面，背景圖像是cover，同時具有滾動和響應能力？

問題描述

3 個解決方案

解決方案1
0 2016-01-27 08:13:05

解決方案2
0 2016-01-27 08:13:55

解決方案3
0 2016-01-27 08:17:12

如何使用css制作頁面，背景圖像是cover，同時具有滾動和響應能力？

問題描述

3 個解決方案

解決方案1 0 2016-01-27 08:13:05

解決方案2 0 2016-01-27 08:13:55

解決方案3 0 2016-01-27 08:17:12

解決方案1
0 2016-01-27 08:13:05

解決方案2
0 2016-01-27 08:13:55

解決方案3
0 2016-01-27 08:17:12