Question

正文有以下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大小是封面的，但当用户浏览投资组合的fiters（例如ALL，PSD-＆gt; HTML / CSS，Animated ......）时，这会让我有点问题，因为它的高度容器正在变化，还有背景图像，这让它看起来有点奇怪。

我怎样才能拥有封面属性（响应性），但在动画发生时否定背景变化？

我尝试从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;
}

修复jQuery动画的背景问题

3 个答案: