我正在设计一个在内容区域上有一些基于图像的阴影(不能使用 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;
}