0

所以我一直在开发一个网站，它使用 JavaScript 动画作为某些部分的背景。现在，有问题的部分被分解如下：

    <section id="intro">
        <div class="info">
            <div class="container">
                <div class="row">
                    <div class="col-full"><h1>My Name</h1></div>
                </div>
                <div class="row"><div class="col-1-4 centered line"></div></div>
                <div class="row">
                    <div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
                </div>
            </div>
        </div>

        <nav id="nav">
            <!-- The content between <span> </span> tags will be hidden on mobile version -->
            <ul class="clearfix">
                <li><a href="#profile">Pro<span>file</span></a></li>
                <li><a href="#skills">Ski<span>lls</span></a></li>
                <li><a href="#experience">Exp<span>erience</span></a></li>
                <li><a href="#education">Edu<span>cation</span></a></li>
                <li><a href="#portfolio">Por<span>tfolio</span></a></li>
                <li><a href="#contact">Con<span>tact</span></a></li>
            </ul>
        </nav>
    </section>

最初，我想使用设置整个部分的背景

    dataUrl = canvas.toDataURL();
    document.getElementById("intro")[0].style.background='url('+dataUrl+')'

但这没有用，所以我最终选择了

    dataUrl = canvas.toDataURL();
    document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'

确实如此。但是，当您向下移动时，导航栏会随着页面滚动，并且一旦向下滚动的脚本启动，背景就会恢复为默认的蓝色。

我的第一个想法是简单地添加

document.getElementById("nav")[0].style.background='url('+dataUrl+')'

但这没有用。我取得了一些成功

document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'

但只有文本周围的区域使用了动画背景；其余的仍然是蓝色的。

因此，我不确定 getElementById 是否存在问题，或者您是否不能将 style.background 与<section>and一起使用<nav>。

有人有什么想法吗？

4

1 回答 1

0

我认为您不需要带有 getElementById 的数组选择器，因此请在整个部分再次尝试，看看是否会为您解决问题。

也一样document.getElementById("intro").style.background='url('+dataUrl+')'

于 2013-10-09T19:24:23.460 回答