4

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

我已经将背景图像分解为多个 png，并设置了位置，一切看起来都很棒.. 然而，我不知道的最后一件事是如何让整个集群重复。如果我设置背景重复：重复-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;
    }
4

2 回答 2

0

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

于 2012-10-03T14:16:42.557 回答
0

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

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

于 2012-10-04T05:24:44.680 回答