我的情况是这样的。
<div id="page_container">
A short text
</div>
#page_container
{
position: absolute;
top: 120px;
left: 280px;
right: 30px;
background-color: #D0D0CD;
border-radius: 5px;
box-shadow: 1px 1px 12px #555;
height: 1060px;
overflow: auto;
background-image: url(./library/grappe.png);
background-repeat: no-repeat;
background-position: bottom right;
}
所以,我的div是1060px, 在我的屏幕的右边, 并有一个图像 在右下角。到目前为止还算正常。很好看,文字很短。
由于溢出:自动,长的文字不会让我的div变高,但是在上面加一个滚动条,这就是我想要的。
但是,背景图片一直粘在div的右下角,而不是基本不显示,当我向下滚动有滚动条的div时才显示。基本上,图像停留在同一个位置,就像一个 position: fixed
. 不能去改变这种行为。
你需要添加一个内部div,这个内部div将有背景,而第一个div将处理滚动。
<div id="page_container">
<div class="block_container">
A short text
</div>
</div>
CSS部分
#page_container
{
position: absolute;
top: 120px;
left: 280px;
right: 30px;
border-radius: 5px;
box-shadow: 1px 1px 12px #555;
height: 1060px;
overflow: auto;
}
#page_container .block_container
{
background: #D0D0CD url('./library/grappe.png') bottom right no-repeat;
}