Question

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

该设计有一个白色内容区域，右上角有阴影，右下角有阴影，沿着底部边缘一直如你所见。

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

问题是，阴影图像显然位于div内部，并且没有办法让它从容器中“挂出”......所以你可以see here它看起来很奇怪。

JSFiddle of the problem，您可以看到顶部阴影看起来很好，但是底部阴影坐在div中，所以也可以通过背景颜色着色。

我无法理解这个问题的解决方案。基本上坐在div里面的阴影应该整齐地坐在它外面。

HTML供快速参考：

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

包装器和内容区域的CSS：

#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;
}

Answer 1

您可以使用multiple backgrounds：

#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;
}

演示：http://jsfiddle.net/Y2dSD/8/

修改：

要修复底部阴影，请使用

#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; }

演示：http://jsfiddle.net/Y2dSD/13/

但那是CSS3。如果您希望它在旧浏览器上运行，请添加一个新容器：

HTML：

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

CSS：

#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; }

演示：http://jsfiddle.net/Y2dSD/17/

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

1 个答案: