在溢出div中滚动背景

我在滚动内容和溢出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中添加具有所需背景的额外图层。

任何想法？

来源

2011-11-24 Yurish

将您的背景设置为内部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>

来源

2011-11-24 09:44:45 Samich

不能这样做，因为我的内部div可能有它自己的背景。而且我不想在 – Yurish

内添加额外的图层像选项一样，您可以使用JavaScript移动背景，但这不是一个好的解决方案。你可以通过订阅容器的'onscroll'事件并在'scrollOffset'值上移动背景位置来做到这一点。 – Samich

另外，你的内容只有不同的背景颜色，所以你可以将它与图像混合：'background：＃f00 url（http://www.google.lv/images/srpr/logo3w.png）no-repeat left top;' – Samich