有点棘手的情况要解释。基本上,我试图在我网站的内容 div 下放置的整体图像是一个杂乱无章的盒子,带有可以弯曲进出的邋遢边框。
到目前为止我得到的是这样的(删除了不相关的代码)
<div class="content-top"><img src="content-top.png"></div>
<div id="content"> <!-- WORDPRESS LOADS CONTENT HERE --> </div>
<div class="content-bottom"><img src="content-bottom.png"></div>
CSS:
#content {
background: url("assets/images/content-bg.png") repeat-y scroll 0 0 transparent;
}
content-bg.png 图像高 300 像素,是可重复的图像,可在两侧创建带图案的边框。
问题是 content-bottom.png 图像仅在放置在这些 300 像素图块之一的末尾时才看起来正确。如果页面内容的高度导致仅显示最后一个背景图块的一半,则行不匹配。
输入这个我怀疑答案在于 CSS,相反我需要一个 javascript/jquery 解决方案,但至于如何做到这一点的细节我不确定。