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/

Answer 2

将背景设置为内部div而不是容器，因为容器停留在同一个地方，但是你的内部div正在向上移动。

<style>
   .parent{
      width:100px;
      height:200px;
      overflow:scroll;
   }
   .parent div{
       background-image: url(http://www.google.lv/images/srpr/logo3w.png);
       width:10px;
       height:1000px;
   }
</style>

Answer 3

不知道用于修复它的纯css方法（因为溢出容器大小不是从它的内容大小计算的，而是从设置大小计算的）。我能想到的唯一方法是添加第二个容器：

http://jsfiddle.net/cBMNs/1/

在溢出的div中滚动背景

3 个答案: