Question

我正在制作一个需要显示巨幅图像的UHD项目。固定浏览器没有问题，但iOS和某些移动浏览器在该领域非常有限。 iOS PNG的最大分辨率为500万像素，远远低于我需要显示的大部分图像。

Jpeg和其他格式不是一种选择。

到目前为止，我决定将大图像分成较小的图像，但我遇到了问题。我创造了一个小提琴来展示正在发生的事情。

正如您所看到的，我在“background-image”中使用了2张图像来显示确切的问题。第一个图像（圆圈）出现在第二个（正方形）的顶部。

以下是CSS的代码：

    <style type="text/css">
        html {
        overflow-x: hidden;
        }
        html, body { height: 100%; width: 100%;}
              body { overflow-x: hidden;
              background-image: url('http://www.clipartbest.com/download?clipart=di7eRd49T'), url('http://i126.photobucket.com/albums/p89/robertthomas_2006/600x600.png');
          background-repeat: repeat-x, repeat-x;
              background-position: left, right;
              }

和jQuery：

    $(function(){
        var x = 0;
        setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 10);
    });

所以问题是两个“小”图像并不是并排的。如果我将它们拼接成一张大图像就没问题了。但移动设备无法处理它。

据我所知，我的css中的“背景位置”由于某种原因被忽略。

有没有办法将“background-repeat：repeat-x”应用于整个背景图像块并将图像并排放置？

我需要将2到10张背景图像同时作为“有机整体”重复。

我使用的方法有可能吗？如果不是 - 什么是最佳解决方案？

Answer 1

那么背景属性对于做你想做的事情并不是很舒服。我建议你把图像放在一个div中，另一只手中的div可以显示在其他内容下面（绝对位置），因此它可以作为背景。请注意，您还必须将z-index设置为您的内容，并且它应该是比“background”div的z-index更高的数字。我再次建议你不要无休止地重复整个图像集，而是在它到达最后一个时再次启动动画。如果您需要对上述内容进行更深入的解释，请给我评论。

使用CSS repeat-x重复多个图像

1 个答案: