html - 海滩背景中间图像垂直重复必须显示全尺寸以匹配底部图像

Question

我花了 10 多个小时试图找到问题的解决方案(大多数答案都在 Stack Overflow 上)，但似乎没有什么完全符合我的需要，而且我可能没有足够的经验来针对我自己的问题调整解决方案。

因此，我制作了一张图片，希望文本出现在我的网站上。但仅限于该图片(框架)内。所以我把它切成三部分并使其可平铺。

这 3 个图像及其外观(注意其中有透明部分):

所以我在 html/css 中做了什么:我制作了 4 个 div，一个用于顶部部分，一个用于中间部分，一个用于底部部分，一个用于页面内容(文本或图像)。

中间部分有一个repeat-y。所以这是当文本长于中间部分(242px)时的结果:

在上图中，中间有两张图片(第一张和重复的一张，但会自动裁剪)。根据文本的长度，它被剪切在错误的位置，并且弄乱了一切。每次它都必须完美贴合，如果它的长度超过 242 像素(顶部图像的高度)，则它不会完全贴合。 我希望 div 在重复时显示整个“middle.png”，或者使 div 长度 = (242 像素 * “middle.png”的数量)

如果可能的话，请帮助我使用纯 CSS/HTML。我对 PHP 几乎一无所知，对 JS 知之甚少(甚至对 Jquery 知之甚少:D)。

Answer 1

您所要求的内容无法用纯 HTML/CSS 完成(据我所知)。您需要对 div 高度进行一些计算，并基于此应用适当的逻辑。

基本上，您需要检查 div 高度 是否能被 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>

WORKING PURE JS EXAMPLE

OR如果您更熟悉jQuery框架，它看起来像这样:

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

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

    <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>

WORKING JQUERY EXAMPLE