在溢出的div中滚动背景

Question

我在溢出的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中添加具有所需背景的附加层是可能的.

有任何想法吗？

Answer 1

好吧,2年前这可能不是这样,但background-attachment:local;解决了Chrome 4 +,IE 9 +,Firefox 25+和Safari 5+中的问题.

移动浏览器的支持是可变的.在IOS中工作,在Android浏览器中不起作用,Android Chrome 47声称支持它,但它在所有情况下都无法正常工作.

我更新了@Alexey Ivanov的小提琴并删除了额外的bg包装.

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