css - 在溢出的 div 中滚动背景

我在溢出的 div 中滚动内容和背景时遇到问题。

我的情况:

<style>
   .parent{
      background-image: url(http://www.google.lv/images/srpr/logo3w.png);
      width:100px;
      height:200px;
      overflow:scroll;
   }
   .parent div{
       background-color:red;
       width:10px;
       height:1000px;
   }
</style>
<div class="parent">
   <div>
      a
      b
      c
      f
      d
   </div>
</div>

内容在滚动，但父级的背景保持不变。我也想滚动背景。我认为无需在父 div 中添加具有所需背景的附加层是可能的。

有什么想法吗？

最佳答案

好吧，在 2 年前情况可能并非如此，但是 background-attachment:local; 解决了 Chrome 4+、IE 9+、Firefox 25+ 和 Safari 5+ 中的问题。

移动浏览器的支持是可变的。在 IOS 中工作，在 Android 浏览器中不工作，Android Chrome 47 声称支持它，但它还不能在所有情况下正常工作。

我更新了@Alexey Ivanov 的 fiddle 并删除了额外的 bg 包装器。

http://jsfiddle.net/nilloc/c5yfn81s/

关于css - 在溢出的 div 中滚动背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8254923/