Question

我有一个网页，我希望它的样式看起来像一本打开的书，中间有一个折痕/阴影。页面的高度不是固定的，而是灵活的，并随内容增长。 body元素具有纸质纹理的背景图像，没有任何阴影。

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

crease_top.png，其中包含本书顶部的过渡。
crease_center.png，它是阴影的可重复中间部分，可随页面内容一起增长。
crease_bottom.png，其中包含阴影的底部。

所以这是我的问题：我无法在100％高度阴影的顶部使用绝对定位的顶部和底部，因为透明图像无法正确遮盖。我可以在正常流程中将所有3个div放在彼此的顶部，但我不知道如何设置中间div的高度。我需要像高度这样的东西：100％减去顶部和底部png的高度，以获得重复区域。我不能使用填充，因为填充推动中心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

在这种情况下，<table>可能会有所帮助......

    <div id="sketchbook_post">
    <table id="crease_wrap" cellpadding="0" cellspacing="0">
        <tr>
            <td id="crease_top">
                <div>&nbsp;</div>
            </td>
        </tr>
        <tr>
            <td id="crease_center">
                <div style="height:100%;">&nbsp;</div>
            </td>
        </tr>
           <tr>
            <td id="crease_bottom">
                <div>&nbsp;</div>
            </td>
        </tr>
     </table>
</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;
      height:100%;
      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 2

因为您的上/下图像是固定高度，我建议使用javascript调整中间内容区域的高度，因为页面大小会发生变化。例如，如果您使用的是prototypejs，那么您可以这样......

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

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

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

2 个答案: