Html 垂直重复的每个背景中间img必须显示完整尺寸，以匹配底部img

我花了10多个小时试图找到问题的解决方案（大多数答案都是关于堆栈溢出的），但似乎没有什么正是我所需要的，我可能没有足够的经验来适应我自己的问题的解决方案

所以，我制作了一张图片，希望文字出现在我的网站上。但只有在那张照片（画框）里面。所以我把它分成三部分，并让它可以平铺

3个图像及其外观（请注意，其中有透明部分）：

所以我在html/css中简单地做了：我做了4个div，一个用于顶部，一个用于中间部分，一个用于底部，一个用于页面内容（文本或图像）

中间部分有一个重复-y。下面是文本长度超过中间部分（242px）时的结果：

在上面的图像中，有两个中间图像（第一个图像和重复的图像，但它是自动裁剪的）。根据文本的长度，它被剪切到错误的位置，这会把一切都弄糟。它每次都必须完美匹配，如果它超过242像素（顶部图像的高度），它就不能完全匹配。 我希望div在重复时显示整个“middle.png”，或者使div长度=（242像素*middle.png的数量）

---

请帮助我，如果可能的话，使用纯CSS/HTML。我对PHP几乎一无所知，对JS更是一无所知（在Jquery:D中更是如此）。

你所要求的不能用纯HTML/CSS完成（据我所知）。您需要对div高度进行一些计算，并在此基础上应用适当的逻辑

基本上，您需要检查

div height

是否可以被242整除。如果是，很酷，每个人都很高兴，如果不是，那么将div的高度设置为可被242整除的下一个数字。

纯JavaScript

<script>
r(function(){

        var div = document.getElementsByClassName('myDiv')[0];
        var divHeight = div.offsetHeight;

        if (divHeight % 242 != 0) { // checks if height is divisible by 242
            div.style.height = ""+(Math.ceil(divHeight / 242) * 242)+"px"; // set height as the next number divisible by 242
         }
    });
    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
</script>

r（函数（）{
var div=document.getElementsByClassName（'myDiv'）[0]；
var divHeight=俯仰偏视；
if（divHeight%242！=0）{//检查高度是否可被242整除
div.style.height=“”+（Math.ceil（divHeight/242）*242）+“px”；//将高度设置为可被242整除的下一个数字
}
});
函数r（f）{/in/.test（document.readyState）？setTimeout（'r（'+f+'），9）：f（）}

或如果您更熟悉jQuery框架，它看起来会像这样：

    //First, add the jQuery library
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

//首先，添加jQuery库

然后添加完成所有工作的代码

    <script>
         $(document).ready(function() {
              var div = $('.myDiv');
              var divHeight = div.height();

              if (divHeight % 242 != 0) { // checks if height is divisible by 242
                    div.height(Math.ceil(divHeight / 242) * 242); // set height as the first next larger number divisible by 242
              }
         });
   </script>

$（文档）.ready（函数（）{
var div=$（'.myDiv'）；
var divHeight=div.height（）；
if（divHeight%242！=0）{//检查高度是否可被242整除
div.height（Math.ceil（divHeight/242）*242）；//将height设置为可被242整除的下一个大数
}
});

---

这就是我的结论，长度必须计算出来，但CSS中可能有一些东西可以自动计算出来。您的解决方案可以在php中完成吗？既然您提出了jQuery，它也可以用php来实现，不是吗？（我几乎只知道CSS/Html，但我读了很多PHP，因此它比JS或jQuery更容易实现）PS：虽然我不怀疑你的解决方案，但我不明白JSFIDLE如何向我展示它的工作原理。很抱歉，我不习惯这样做。好吧，最简单的方法是将纯JS解决方案中的整个标记粘贴到html中需要计算的页面上的任意位置。在PHP中不能这样做，因为PHP是服务器端语言（在呈现内容之前，它在服务器上执行）。JSFIDLE显示红色div的初始高度为150px（右上角的CSS代码），但您会注意到，在JS进行计算后，div的最终高度为242px；您可以通过将初始高度设置为300px进行测试，例如，单击run，最终高度将为484px（2*242）。好的，谢谢，我现在看到了JSFIDLE！我没注意到它超过了150像素。“你不能用PHP来做这件事，因为PHP是服务器端语言（它在内容呈现之前在服务器上执行）。”但是jQuery也是，对吗？（如果强制的话，我会使用javascript，但我更喜欢服务器端，以防在浏览器上被禁用。顺便说一句，我只需要将代码snipet放入我的页面？）请问，为了让它工作，必须修改什么？我是否要将其添加到中间部分div中？我真的不习惯JS的基础知识，所以我真的不知道如何让它工作