css - 如何创建一个灵活的内容区域，其中有重复的背景图像，顶部和底部有固定的图像过渡/上限？

Question

我有一个网页，我想将其设计为看起来像一本打开的书，中间有一个折痕/阴影。页面的高度不是固定的，而是灵活的，随着内容的增长而增长。 body 元素具有纸张纹理的背景图像，没有任何阴影。

对于阴影，我的设计师给了我 3 个半透明的 png:

1. crease_top.png 包含书籍顶部的过渡。

2. crease_center.png 是阴影的可重复中间部分，可以随页面内容增长。

3. crease_bottom.png 包含阴影的底部部分。

所以这是我的问题:我不能在 100% 高度阴影的顶部使用绝对定位的顶部和底部，因为透明图像无法正确覆盖。我可以在正常流程中将所有 3 个 div 放在彼此之上，但我不知道如何设置中间 div 的高度。我需要像 height: 100% minus height of top and bottom pngs 这样的东西来获得重复区域。我不能使用内边距，因为内边距会将中心 div 推得更高并且不会限制背景图像。

这是我目前所拥有的，但如果需要更好的实现，我愿意更改它:

<div id="sketchbook_post">

     <div id="crease_wrap">
       <div id="crease_top">
       </div>
       <div id="crease_center">
       </div>
       <div id="crease_bottom">
       </div>
     </div>

</div>


#crease_wrap {
      position:absolute;
      top:0;
      left:50px;
      height:100%;
      width:50px;
    }
#crease_top {
      height:105px;
      width:53px;
      background-image: url(<%= asset_path 'page-crease_top.png' %>);
      background-repeat: no-repeat;

    }
#crease_center {
      width:53px;
      padding-top:105px;
      padding-bottom:176px;
      background-image: url(<%= asset_path 'page-crease_center.png' %>);
      background-repeat: repeat-y;

    }

#crease_bottom {
      height:167px;
      width:53px;
      background-image: url(<%= asset_path 'page-crease_bottom.png' %>);
      background-repeat: no-repeat;

    }

对于解决此类问题，您有什么建议？

Answer 1

因为您的顶部/底部图像是固定高度，我建议使用 javascript 随着页面大小的变化调整中间内容区域的高度。例如，如果您使用的是 prototypejs，您可以这样...

window.onresize = function() {
    $('crease_center').setStyle({ height: (document.viewport.getHeight() - 272) + 'px' });
}

其中 272 表示顶部/底部元素的组合高度。