交替背景图像之间的间距答案

【问题标题】：Spacing between alternating background images交替背景图像之间的间距
【发布时间】：2013-06-13 01:01:48
【问题描述】：

我正在创建一个网页，目前如下图所示：

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

灰色背景和草与灰色背景之间的渐变可以忽略不计。所有背景图片的大小均为260x650 像素，图片数量是静态的。

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

background: url('bg1.png') 0 0 no-repeat, url('bg1.png') 260px 0 no-repeat

问题是我无法设置repeat-x，因为图像之间必须有260px 的边距。 This answer to other question 表示没有这样的余量。我不希望将图像组合成一个图像。

我的资源是 plain JavaScript、CSS 和 HTML。我的目标浏览器相对较新（IE 9，但最好是 8），所以不要担心旧的怪癖。

【问题讨论】：

编辑图像并添加一些透明边距更简单...
我明白这一点，但我希望我的用户能够更改图像。
我不明白www1.picturepush.com/photo/a/13298504/img/Anonymous/…，您是否想要在两者之间有一个真正的差距，或者它们是否应该重叠一些。（仅针对宽度的不同背景尺寸可能适用于草设计）？ :) 如果你想要像网格这样的间隙，额外的图像就可以了
所以用户可以上传自己的图片或类似的东西？你可以依赖一些服务器端的图像处理插件，或者通过 Javascript 来解析 background-image 和 background-position 样式属性（background-repeat 可以单独设置为 no-repeat）。
@GCyrillus 我不确定我是否理解你的意思。我希望图像直接交替显示，直到填满整个屏幕。

标签： javascript html css

【解决方案1】：

See demo here.

这是一个你可以使用的函数：

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;
}

使用所需图像的 URL 编辑 images 数组。它们将按照数组中给出的顺序并排放置。此外，图像之间的间距由imagesWidth 变量定义。

在演示中，单击按钮时正在设置背景。当然，如果您想立即加载背景图像，您可以调用<head> 处的函数。

【讨论】：

这太棒了！ MaxArt 说完之后我在想的差不多。我会看看我是否可以尝试一下，所以它会等待窗口调整大小，之后如果需要它会附加更多图像。
另外，感谢您的图片编辑。我太年轻了，不能直接给他们看。
是的，np。也许我也可以帮助进行调整，所以请不要犹豫！干杯！

【解决方案2】：

在尝试了 acdcjunior 和 MaxArt 给我的想法之后，我最终在页面顶部创建了一个标题元素，并用带有背景图像的 div 填充它。我使用 div 代替长背景样式，因为我觉得这种方式更方便。这样我就不必担心背景图像的大小，即使我在我的问题中指定它们都具有相同的大小。

我的 HTML 结构如下所示：

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

CSS：

header {
    white-space: nowrap;
    height: 260px;
    display: inline-block;
    max-width: 100%;
    overflow:hidden;
}

header .bg {
    width: 650px;
    height: 260px;
    display: inline-block;
    background: no-repeat center;
    background-size: cover;
}

头类的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>';
        }
    }
}

然后，当你的文档准备好时，你创建一个新的头类实例，一切都会好起来的：

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

makeHeader 函数的参数是不同背景图像的数量。这些图像必须命名为“header1.png”、“header2.png”等，但如果您想以不同的方式命名，更改名称和扩展名应该不难。

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

并缩小：

【讨论】：

这里有一个错误，如果最后一张图片太大而无法放在页面上，会出现一个水平滚动条。我通过将 max-width:100% 和 overflow:hidden 应用于标题标签来解决此问题。我还修复了一个小错误，即计算将使用屏幕宽度加上滚动条，这将创建一个无限循环。