多张图片背景<div>重复

Question

我正在尝试解决 Tumblr 站点 iPad PNG/背景图片像素大小限制的问题。该站点的内容区域使用了无限滚动功能，并有一个巨大的垂直背景，随着你向下滚动，它会显示更多的字符。

我已将背景图分成了多个 PNG，并设置了位置，一切看起来都很棒……然而，我现在遇到的唯一问题是如何使整个簇重复。如果我设置 background-repeat: repeat-Y;，所有的图像都会堆叠在一起。

以下是代码：

糟糕

#contnetAreaBack {
        margin-left:auto;
        margin-right:auto;
        background-image:url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_01.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_02.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_03.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_04.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_05.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_06.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_07.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_08.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_09.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_10.png');
        background-position:center 0px, center 1000px, center 2000px, center 3000px, center 4000px, center 5000px, center 6000px, center 7000px, center 8000px, center 9000px;
        background-size: auto auto;
        background-repeat: no-repeat;
        background-attachment:scroll;
        width:100%;
        padding-bottom:500px;
        overflow-x:hidden;
    }

- Brian Brown

Answer 1

在 JavaScript 中，您可以使用 %(mod) 来重复图像，一旦 mod 等于某个特定值。

基本上，您需要将所有这些拆分的图像放入单个 div 中，将一个重复的 div 放在其下方，然后在 mod 上重复。

- Harsha Venkataramu

Answer 2

我从你的图片中注意到，你使用了相同的黄色管道，只是字符和裂纹不同。也许你可以将背景设置为黄色管道的第一行像素，并在y轴上重复。然后，你可以运行一个PHP脚本，在while循环结束时基于浮动图像将仅包含字符/裂缝的较小PNG文件注入到管道上。我不熟悉你提到的限制，但如果你没有使用图像数量的限制，那么这种方法应该有效，除非你想要在页面变长时无限滚动，通过字符循环回来。在这种情况下，我会尝试相同的解决方案，但是我会尝试使用页面高度而不是字符数作为我的PHP循环约束条件，将其除以一个覆盖图像的高度（我想象你所有的背景图像都有相同的高度），并向上取整。这只是一个初步的解决方案，如果你发现任何大问题，我可以为你提供更具体的建议。

- Red Fish