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

Question

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

3

我正在制作一个需要显示大型图片的UHD项目。对于静止的浏览器来说没有问题，但是iOS和一些移动浏览器在这方面非常有限。iOS PNG的最大分辨率为5百万像素，远低于我需要显示的大多数图片。

JPEG和其他格式不可选。

到目前为止，我决定将大图像分成较小的图像，并遇到了问题。我创建了一个fiddle来展示发生了什么。 JSFIDDLE 如您所见，我在"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-postion”由于某种原因被忽略了。

那么有没有一种方法可以将“background-repeat:repeat-x”应用于整个背景图像块，并将图像并排放置？

我需要2至10个背景图像同时重复成为整体。

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

- user3299345

为什么不使用CSS @media查询来呈现移动特定的样式？ - Mark

有几个原因：它们的进展太快了。其中一些具有4英寸至5英寸的显示屏，分辨率比23英寸至24英寸的静态显示器更高。今天的移动设备能够处理大多数常规网页。此外，例如@media handheld只是指那些古老的微型HTML手机，这些手机无法真正显示网页。ePUB、MOBI、平板电脑和供应商社区都强烈表示：“绝不是@media handheld”设备！他们正确地担心这会让他们永远处于一个无人问津的地位，屈服于“真正”的网页之下。 - user3299345

我不会使用特定设备的媒体查询，我会使用类似于@media (min-width: 600px) and (max-width: 800px)的东西，当我开发响应式网站时，这种方法一直很有效。 - Mark

我不明白这样做怎么能帮助，如果iOS甚至无法开始处理源图像。你能否提供一个jsfiddle示例，其中包含6兆像素（或更大）的PNG文件，在iOS上可以正确渲染？无论如何，感谢您的回复。 - user3299345

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2896929 · Accepted Answer

背景属性并不适合你想要做的事情。我建议你将图片放在一个

标签中，这个

标签可以通过绝对定位显示在其他内容下面，充当背景。请注意，你还必须设置内容的z-index，而且它应该比“背景”

标签的z-index更高。此外，我建议你不要无休止地重复整组图片，而是在到达最后一张图片时重新开始动画。如果你需要上述内容的更深入解释，请给我留言。