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

有一个问题，为什么这行不通？ 一切都应该按预期工作，在stackowerflow上还有另一个关于这个问题的帖子，但该帖子的解决方案也不起作用！

Answer 1

您的代码在我的本地环境中按预期工作。 您的代码无法正常工作的最可能原因是您忘记或没有在标头中正确链接 Bulma。