有没有办法只使用 CSS 在固定元素内滚动背景图像？答案

【问题标题】：Is there a way using only CSS to have a background image scroll within a fixed element?有没有办法只使用 CSS 在固定元素内滚动背景图像？
【发布时间】：2014-11-25 00:41:20
【问题描述】：

我有两个带有背景图像的固定元素，我希望它与页面一起滚动，而不需要滚动元素。这是 jsfiddle：http://jsfiddle.net/3s3qu2yv/

有没有办法在纯 CSS 中实现这一点？我知道有一种方法可以做到这一点javascript，但如果可能的话我想避免这种情况。

【问题讨论】：

标签： css scroll fixed

【解决方案1】：

不知道你在这里问什么。看起来你已经在你的小提琴中完成了这个。

否则背景为background-attachment 属性，使其与元素一起滚动。

这通常用于视差网站。

【讨论】：

我不希望它与背景所在的元素一起滚动，而是与页面一起滚动。

【解决方案2】：

仅使用 CSS 无法做到这一点，您将需要 JavaScript。确切地说，这个 jQuery：

http://jsfiddle.net/3s3qu2yv/4/ -- 更新以更好地说明我想要的效果。

function scr() {
   var scrolled = $(window).scrollTop();
   $('.fx').css('background-position', 'center -' + scrolled + 'px');
}

$( document ).ready(function() {
   $(window).scroll(function(){
      scr();
   });
});

固定元素的背景不能随页面滚动，无论背景附件设置为fixed 还是scroll，因为元素本身不会移动。

【讨论】：