我想为 background-position 制作动画<body> 的 CSS 属性使用 skrollr.js 标记.我希望它在页面滚动时稍微向上移动背景图像以增加一点情趣。然而，使用这个...
data-0="background-position: 0px 0px;" data-1000="background-position: 0px -250px;"
...不工作。
我尝试使用 <div>完成壮举(动画化其 background-position )，但这并没有给我想要的效果。当我为 background-property 设置动画时的 <div> , background-position正常工作；但是一旦<div>滚动到看不见的地方，div 后面的东西变得可见，这是我不想要的。有什么建议吗？
最佳答案
好的，我知道是什么导致了这个问题。我的 CSS 是这样写的:
background: url(/images/mainBG.jpg) no-repeat center fixed!important;
我需要删除“!important”，它非常有效。但是......现在我注意到另一个问题(如果我得到解决，我会在这里发布答案)。我正在使用 MasterPages 将其实现到 4.0 C# .net 网站中(请在此处查看实际操作:brugrill.ntxdesigns.com)。考虑到所有 .aspx 页面的长度都不同，我不能在 MasterPage 中使用 skrollr.js，因为它会根据您在“data-”属性中输入的内容设置页面高度，因此如果页面长于“data-”属性的像素位置(假设页面为 5000 像素，“data-”属性为 1000)，背景滚动在页面完成滚动之前停止。如果“data-”属性比页面的像素长度长，页面在本应停止后继续滚动，这看起来很糟糕(正如您在上面的链接中看到的那样)。我希望我可以使用带有 this.Page.Master.FindControl 的代码隐藏来找到正文控件标记并将“data-”属性修改为我需要的值。
有没有办法通过 javascript、jquery 或其他方式获取页面的当前像素长度并在“data-”属性中使用该值？这样我就不必对这些数据进行硬编码，而且如果页面增长，值(value)也会增长。任何建议都会很棒!
关于javascript - 使用 CSS 和 skrollr.js 为 <body> 背景设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24223797/