Question

我正在尝试完成围绕tumblr网站的iPad PNG /背景图像像素大小限制的工作。网站的内容区域使用无限滚动功能，并具有巨大的垂直背景，当您向下滚动时会显示更多字符。

我已经将背景图像分解为多个png，并设置了位置，一切看起来都很棒..然而，我无法弄清楚的最后一件事是如何使整个群集重复。如果我设置background-repeat：repeat-Y;这些图像全部叠在一起。

谢谢，代码打击：

Drats

#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;
    }

Answer 1

我从你的照片中注意到你使用了同一个不同字符的黄色管子。也许你可以让背景成为黄色管道的第一行像素，并在y上重复。然后你可以运行一个php脚本，它根据一个while循环注入较小的png文件，只有字符/裂缝作为管道上的浮动图像，当你用完字符时结束。我不熟悉你提到的限制，但如果你没有限制你可以使用的图像数量该方法应该工作，除非你想在页面变长时无限滚动，循环回字符。在这种情况下，我会尝试相同的解决方案，但我没有使用字符数作为我的PHP循环约束，我会尝试在注入叠加图像之前采取页面的高度，将其除以一个叠加图像的高度（我想象你的所有bg图像具有相同的高度）并向上舍入。这是一个spitball解决方案，如果您发现任何重大问题我可以更具体针对您。

Answer 2

一旦mod等于某个值，你就可以在javascript中使用％（mod）重复图像。

基本上，你需要将所有那些分解的图像放到一个div中，在它下面放一个重复的div，然后在mod上重复。

多个图像背景<div>重复</div>

2 个答案: