修复jQuery动画的背景问题

Fixing background issue on jQuery animation

本文关键字：背景 问题 动画 jQuery 修复      更新时间：2023-09-26

这是我有问题的网站: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的大小是覆盖的，但是这给我带来了一个小问题，当用户在文件夹过滤器上导航时(例如，ALL, PSD->HTML/CSS，动画…)，因为容器的高度和背景图像都在改变，这使得它看起来有点奇怪。

我怎么能有封面属性(响应性)，但否定背景变化，而动画发生?

我试过从cover到100%，但这也是不对的，因为它不会覆盖整个页面…

我将设置图片的最小高度为它的实际高度。

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

为什么要在body上隐藏溢出?用户应该如何向下滚动?

你可以这样做:

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)大，并将背景附件设置为fixed。这将使背景在每个页面上保持不变，并且在滚动时不会移动。

设置background-attachment为fixed 

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