Html 背景定位帮助-带阴影的可扩展内容区域？

我正在设计一个在内容区域有一些基于图像的阴影（不能使用CSS3，因为它们不是简单的阴影），这需要在垂直方向上灵活

该设计有一个白色的内容区域，在右上角有一个阴影，右下角有一个阴影，一直沿着底部边缘，正如你在网站上看到的那样

为了尝试和做到这一点，我创建了一个包装器来尝试和处理顶部阴影，然后将背景图像应用到其中主要内容区域的底部来处理底部阴影。然后我把背景变成了白色。我的想法是，“底部”阴影图像将始终附着在内容区域的底部，无论它扩展了多少，而白色将处理其余部分

问题是，阴影图像显然位于div内部，并且没有办法让它挂在容器外面。。。所以你会觉得很奇怪

，您可以看到顶部阴影看起来很好，但底部阴影位于div内，因此也可以通过背景颜色进行着色

我想不出解决这个问题的办法。从本质上说，位于div内部的阴影应该整齐地位于div外部

HTML供快速参考：

<div id="contentWrapper">
      <div id="content">
            <h1>HTML Ipsum Presents</h1>
            <h2>Content in here</h2>
      </div>
</div>

#contentWrapper{
    background-image:url('../img/top-content.png');
    background-position:top right;
    background-repeat: no-repeat;
    width:820px;
    margin-left:200px;
}


#content{
    background-image:url('../img/bottom-content.png');
    background-position: bottom right;
    background-repeat:no-repeat;
    background-color:#FFF;
    width:802px;
}

您可以使用：

演示：

编辑：

要修复底部阴影，请使用

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top,
        url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    width:820px;
    margin-left:200px;
    padding-bottom: 15px;
}

演示：

---

但这是CSS3。如果希望它在旧浏览器上工作，请添加新容器：

HTML:

---

演示：

你能为我们做一把小提琴吗？很抱歉，我太习惯使用Chrome开发工具了，我总是忘了：P几分钟后回来，谢谢！）完成：）感谢您的帮助！好吧，我不太明白你的问题是什么。图像将按指定显示在右下角。你是说阴影没有与content div的底部完全对齐吗？如果是这样，那是因为你的图像底部有空白。阴影应该在空白之外，代表白色区域周围的阴影。但它不能，因为那个div也有一个白色的背景色。我不知道怎么做。这已经修复了右下角的阴影，但是底边没有阴影。

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top,
        url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    width:820px;
    margin-left:200px;
    padding-bottom: 15px;
}

<div id="contentWrapper"><div>
      <div id="content">
            <h1>HTML Ipsum Presents</h1>
            <h2>Content in here</h2>
      </div>
</div></div>

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top;
    width:820px;
    margin-left:200px;
}
#contentWrapper>div{
    background:url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    padding-bottom:15px;
}