Question

您好我的部分课程中没有英雄背景图片是sass

HTML＆amp; 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%;
}

我唯一改变的是

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

section class不使用sass显示图像

1 个答案: