Javascript 交替背景图像之间的间距

我正在创建一个网页，当前看起来像下图：

我现在要做的是，用两个或更多交替的背景图像替换草地图像。 这些图像必须在x方向上重复。例如：

灰色背景和草与灰色背景之间的梯度可以忽略。 所有背景图像的大小均为

260x650

像素，图像数量为静态

我尝试过的是创建这样的背景：

<header><div class=bg data-bgNumber=1 style="background-image:url('header1.png')"></div></header>

background:url（'bg1.png'）0不重复，url（'bg1.png'）260px 0不重复

问题是我无法设置

repeat-x

，因为图像之间必须有

260px

的边距。国家没有这样的差距。 我不希望将这些图像合并到一个图像中

我的资源是纯JavaScript、CSS和HTML。我的目标浏览器相对较新（即9，但最好是8），所以不要担心老毛病。

以下是您可以使用的函数：

function changeBodyBackground() {
    var images = ['http://goo.gl/tQl3t', 'http://goo.gl/6t3lG',
                                                          'http://goo.gl/HDzqs']
    var imagesWidth = 260;
    var screenWidthToCover = 3000; // the max resolution expected
    var i = 1, backgroundStyle = 'url("'+images[0]+'") 0 0 no-repeat';
    while (i*imagesWidth < screenWidthToCover) {
        backgroundStyle += ', url("'+images[i%images.length]+'") '
                                               +(imagesWidth*i)+'px 0 no-repeat';
        i++;
    }
    document.body.style.background = backgroundStyle;
}

函数changebodybodbackground（）{
var images=['http://goo.gl/tQl3t', 'http://goo.gl/6t3lG',
'http://goo.gl/HDzqs']
var-imagesWidth=260；
var screenWidthToCover=3000；//预期的最大分辨率
var i=1，backgroundStyle='url（'+images[0]+''）0 0无重复'；
而（i*imagesWidth

使用所需图像的URL编辑

图像

数组。它们将按照数组中给定的顺序并排放置。此外，图像之间的间距由

imagesWidth

变量定义

---

在演示中，单击按钮时背景正在设置。当然，如果希望立即加载背景图像，您可以调用

中的函数。

在对acdcjunior和MaxArt给我的想法进行了深入研究后，我在页面顶部创建了一个标题元素，并用背景图像填充div。我使用div而不是长背景样式，因为我觉得这种方式更方便。这样我就不必担心背景图像的大小，即使我在问题中指定了它们的大小都相同

我的HTML结构如下所示：

<header><div class=bg data-bgNumber=1 style="background-image:url('header1.png')"></div></header>

头类的JS：

function Header() {
    this.header = document.body.getElementsByTagName('header')[0];
    this.makeHeader(4);
    window.onresize = function() {
        this.makeHeader(4);
    }.bind(this);
}
Wrapper.prototype = {
    makeHeader: function(difBgCount) {
        while(this.header.offsetWidth < document.body.clientWidth) {
            var bg = 1+this.header.lastElementChild.getAttribute('data-bgNumber')%difBgCount;
            this.header.innerHTML += '<div class=bg data-bgNumber='+bg+' style="background-image:url(\'header'+bg+'.png\')"></div>';
        }
    }
}

makeHeader函数的参数是不同背景图像的数量。这些图像必须命名为'header1.png'、'header2.png'等，但如果您希望以不同的名称命名，则更改名称和扩展名并不困难

最后，当图像大小不同时，看起来是这样的：

并缩小：

---

编辑图像和添加一些透明页边距更简单……我明白这一点，但我希望用户能够更改图像。我不明白，您是希望中间有一个真正的间隙，还是应该重叠一些。（不同的背景尺寸仅适用于宽度，可用于草地设计）？：）如果你想要像网格一样的间隙，额外的图像就可以了，用户可以上传自己的图像或者类似的东西吗？你可以依靠一些服务器端图像处理插件，或者在Javascript上解析构成

背景图像

和

背景位置

样式属性（

背景重复

可以分别设置为

无重复

）@GCyrillus我不确定我是否理解你的意思。我希望这些图像可以直接交替，直到整个屏幕都被填满。这太棒了！这和我听了MaxArt的话后想的差不多。我会看看是否有机会，所以它会等待一个窗口大小调整，之后它会附加更多的图像，如果需要的话。另外，感谢您的图像编辑。我太年轻了，不能直接给他们看。是的，np。也许我也可以帮你调整一下，所以请不要犹豫，来看看吧！干杯这里面有一个bug，如果最后一个图像太大，无法放在页面上，就会出现一个水平滚动条。我通过将max-width:100%和overflow:hidden应用于header标记来修复这个问题。我还修复了一个小错误，其中计算将使用屏幕宽度加上滚动条，这将创建一个无限循环。

var header;
function onBodyLoad() {
    wrapper = new Header();
}