0

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

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

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

问题是，阴影图像显然位于 div 内，并且没有办法让它“挂在”容器外......所以你可以在这里看到它看起来很奇怪。

问题的 JSFiddle，您可以看到顶部阴影看起来不错，但底部阴影位于 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;
}
4

1 回答 1

0

您可以使用多个背景：

#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/

于 2012-09-10T22:00:46.213 回答