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 回答