修復jQuery動畫的背景問題

Question

這是我遇到問題的網站： http : //florin-pop.com/work/

該主體具有以下CSS：

body {
        height:100%;
        font-family: "Open Sans",sans-serif;
       background-image: url("bg.jpg");
       -webkit-background-size: cover;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: left top;
       color: #333;
       overflow: hidden;
    }

如您所見，bg大小為Cover，但是當用戶在文件夾組合器（例如ALL，PSD-> HTML / CSS，Animated ...）上導航時，這給我造成了一個小問題，因為容器的高度正在變化還有背景圖片，看起來有點怪異。

如何在動畫發生時具有Cover屬性（響應性），卻否定背景變化？

我嘗試將cover更改為100%但這也不對，因為它不能覆蓋整個頁面...

Answer 1

我將pictrue的最小高度設置為它的實際高度。

body 
{
       min-height: 1200px;
       height:100%;
       font-family: "Open Sans",sans-serif;
       background-image: url("bg.jpg");
       -webkit-background-size: cover;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: left top;
       color: #333;
       overflow: hidden;
}

Answer 2

為什么要應用隱藏在身體上的溢水？ 用戶應該如何向下滾動？

您可以執行以下操作：

body {
  height: 100%;
  font-family: "Open Sans",sans-serif;
  background-image: url("bg.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  color: #333;
  /* overflow: hidden; */      
  min-height: 100%;
}

獲取一張大圖像，比普通瀏覽器大一個圖像（例如5000x2500），然后將背景附件設置為固定。 這將使背景在每頁上保持不變，並且在滾動時不會移動。

Answer 3

將background-attachment設置為fixed

body {
    background-attachment: fixed;
    background-image: url("bg.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
}