我正在制作一个需要显示大型图片的UHD项目。对于静止的浏览器来说没有问题,但是iOS和一些移动浏览器在这方面非常有限。iOS PNG的最大分辨率为5百万像素,远低于我需要显示的大多数图片。
JPEG和其他格式不可选。
到目前为止,我决定将大图像分成较小的图像,并遇到了问题。我创建了一个fiddle来展示发生了什么。 JSFIDDLE 如您所见,我在"background-image"中使用了2个图像来显示确切的问题。第一张图片(圆形)出现在第二张图片(正方形)的上面。
以下是CSS代码:
所以问题在于这两个“小”图像不是并排的。如果我把它们拼接成一个大图像,就没有问题了。但是移动设备无法处理这种情况。
据我所见,我的CSS中的“background-postion”由于某种原因被忽略了。
那么有没有一种方法可以将“background-repeat:repeat-x”应用于整个背景图像块,并将图像并排放置?
我需要2至10个背景图像同时重复成为整体。
我使用的方法是否可行?如果不行-最佳解决方案是什么?
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个背景图像同时重复成为整体。
我使用的方法是否可行?如果不行-最佳解决方案是什么?