在溢出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