html - 部分类不使用 sass 显示图像

Question

你好我无法在我的部分类中获取英雄背景图像是 sass

HTML 和 SASS

.hero
  background: url("heroimage.jpg")
  min-height: 100%
  background-size: cover
  background-position: 50% 0

  <section class="hero">
    <div class="container grid">
      <div class="hero-text col">
        <h1 class="title-large">Hi I'm <span>Jamie Wales</span></h1>
          <p class="text-intro">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur.</p>
          <a href="" class'btn btn--secondary'>Learn More</a>
          <a href="" class'btn btn--primary'>Get In Touch!</a>
      </div>
      <div class="col">
        <img src="img/mainlogo.png" alt="" class="hero-img">
      </div>
    </div>
    </section>

背景颜色有效但背景图像无效，我是否遗漏了什么？任何帮助，我将非常感激

Answer 1

首先检查您的图像是否存在于代码文件所在的根目录中，因为您没有定义它的位置。

第二个给类一个宽度。

你可以在这里看到我的工作示例(JSFiddle)

.hero {
     background: url('https://media.giphy.com/media/vvZeaCj5tf0qY/giphy.gif');
     min-height: 100%;
     background-size: cover;
     background-position: 50% 0;
     width:100%;
}

我唯一改变的是

绝对链接图像。 列表项添加了宽度..