Question

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

enter image description here

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

bg repeating

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

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

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

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

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

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

使用您需要的图片的网址编辑images数组。它们将与数组中给出的顺序并排放置。此外，图像之间的间距由imagesWidth变量定义。

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

Answer 2

在玩了acdcjunior和MaxArt给我的想法之后，我最终在页面顶部创建了一个标题元素，并用divs填充背景图像。我使用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函数的参数是不同背景图像的数量。这些图片必须命名为＆＃39; header1.png＆＃39;，＆＃39; header2.png＆＃39;等，但如果您希望以不同方式命名，则更改名称和扩展名应该不难

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

缩小： enter image description here

交替背景图像之间的间距

2 个答案: