Question

我有一个主页，然后有4个标签切换到不同的html文件。单击“关于”选项卡，它将切换到about.html文件。所有4个选项卡/文件都使用相同的CSS文件（main.css）。话虽如此，他们都使用相同的背景图像。我遇到的问题是，当我单击其中一个选项卡时，背景图像会在一瞬间消失，然后重新出现，就像它必须为每个选项卡再次加载一样。我该怎么做才能修复它，这样每次点击一个标签时图像都不会消失，所以它在整个网站上保持一致？

以下是添加背景图片的CSS代码

body { background: url("IMG_0462.jpg") no-repeat; background-size: cover; }

以下是我用于标签

的HTML代码

<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Adam Birdsall</h1>
            <h2>Software Engineer</h2>
        </a>
        <nav>
            <ul>
                <li><a href="index.html" class="selected">Overview</a></li>
                <li><a href="resume.html">Resume</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
            <div id="wrapper">
                <section>


                </section>

            </div>
</body>

Answer 1

您已将每个链接添加为单独的页面，并且需要加载这些页面才能看到它们，即使浏览器很可能会缓存您的图像，还有一个＆＃34;重新加载＆＃34;发生。

如果您的目标是在没有页面加载的情况下进行平滑过渡，则必须使用Ajax调用（或其他一些javascript / CSS，即基于客户端的技术）。

您可以在网络上查看此类网站的示例，我发现可能对您有用的一个示例here

不幸的是，它不是一个简单的黑客或修复，但你肯定会喜欢这样做，肯定没有图像消失。

保持背景图像在整个网站HTML / CSS中保持一致

1 个答案: