如何使用CSS創建一個頁面，背景圖片是封面，滾動並且響應？

我想製作一個頁面，通過向下滾動內容div，覆蓋背景圖像。因此，我爲背景圖像創建了一個背景圖像，並創建了2個div，它在大窗口大小下工作，但是當我更改大小的窗口，並使其更小（以測試響應），圖像和內容div之間存在白色差距。如何使用CSS創建一個頁面，背景圖片是封面，滾動並且響應？

請你幫我把它刪除嗎？

 <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; 
}

來源

2016-01-27 Nilla

什麼樣的形象很好地工作？您的演示代碼中沒有圖像，因此我們無法看到它與其他任何內容之間的差距。 – Quentin

body { background：url（「img/crop.jpg」）no-repeat top center fixed; background-size：100％; } – Nilla

請**編輯**測試用例以提供問題的實際演示（以及我們實際可以訪問的圖片，您的相對URL對我們沒有太大幫助）。 – Quentin

你需要讓身體和HTML轉到頁的底部：

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

，然後將背景設置爲background-size: cover;：https://css-tricks.com/perfect-full-page-background-image/

來源

2016-01-27 08:13:05

謝謝，但是當我更改爲此代碼時，我的圖像沒有響應。 – Nilla

你可以做這樣的事情：

<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; 
}

希望它有幫助！

來源

2016-01-27 08:13:55 echo

@ echo.Thank你。 – Nilla

不客氣:) – echo

聽起來像這可能是由於您的背景圖片沒有填滿整個可用空間。嘗試添加到身體（元素與BG圖像）;

background-size:cover;

注意，這不會對舊的瀏覽器

來源

2016-01-27 08:17:12

謝謝，但是當我更改爲此代碼時，我的圖像沒有響應。 – Nilla

不響應？封面使圖像填充容器的高度和寬度，它仍然應答。你使用的是IE8這樣的舊瀏覽器嗎？我測試了現代Chrome和Firefox中的主體，沒有任何問題。 –

我嘗試谷歌瀏覽器和火狐，差距是刪除，但他們都沒有responsive.do你知道我可以在這裏添加我的背景圖片，這將在演示中顯示？ – Nilla

如何使用CSS創建一個頁面，背景圖片是封面，滾動並且響應？

回答

相關問題