Bulma.io全高度英雄背景

Question

尝试将背景图片添加到bulma.io的英雄区域，但无法正常工作！

以下是代码：

<div>
    <section class="hero is-primary is-fullheight header-image">
        <!-- Hero header: will stick at the top -->
        <div class="hero-head">
            <header class="navbar">
                <div class="navbar-brand">
                    <a class="navbar-item" href="http://bulma.io">
                        <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
                    </a>

                    <div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
                    <!-- navbar start, navbar end -->
                    <div class="navbar-end">
                        <a class="navbar-item" href="/about">About</a>
                        <a class="navbar-item" href="/path">Path</a>
                        <a class="navbar-item" href="/blog">Blog</a>
                    </div>
                </div>
            </header>
        </div>


        <!-- Hero content: will be in the middle -->
        <div class="hero-body">
            <div class="container has-text-centered">
                <h1 class="title">
                    Title
                </h1>
                <h2 class="subtitle">
                    Subtitle
                </h2>
            </div>
        </div>
        <!-- Hero footer: will stick at the bottom -->
        <div class="hero-foot">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active"><a>Overview</a></li>
                        <li><a>Modifiers</a></li>
                        <li><a>Grid</a></li>
                        <li><a>Elements</a></li>
                        <li><a>Components</a></li>
                        <li><a>Layout</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </section>
</div>

并且 CSS 代码：

.header-image {
    background-image: url("http://orig14.deviantart.net/7584/f/2015/181/2/7/flat_mountains_landscape_by_ggiuliafilippini-d8zdbco.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #999;
}

有一个问题，为什么这个不能工作？ 一切都应该按预期工作，stackoverflow上也有另一篇关于这个问题的帖子，但是那篇帖子中的解决方案也不起作用！

- user8392725

---

似乎和我一起工作得很好：https://pasteboard.co/GDVmSMi.png - Jap Mul

我忘记在头部链接Bulma文件。 - user8392725

现在它已经按预期工作了。 - user8392725

Answer 1

在我的本地环境中，您的代码可以正常工作。如果您的代码不起作用，最有可能的原因是您忘记或未正确链接Bulma到头文件中。

“最初的回答”翻译成英文是"Original Answer"。

- Nicolasome

---

@user8392725在评论中提到，正确地在头部链接Bulma文件是解决他的问题的关键。 - Nicolasome