3

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

在此处输入图像描述

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

bg 重复

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

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

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

问题是我无法设置repeat-x，因为260px图像之间必须有一个边距。这个对其他问题的回答表明没有这样的余量。我不希望将图像组合成一个图像。

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

4

2 回答 2

3

在此处查看演示。

这是您可以使用的功能：

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>如果您想立即加载背景图像，您可以调用 中的函数。

于 2013-06-11T23:18:44.737 回答
0

在玩弄了 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”等，但如果您想以不同的方式命名，更改名称和扩展名应该不难。

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

并缩小： 在此处输入图像描述

于 2013-06-12T13:30:22.900 回答