css - 为什么背景图片加载不出来?

标签 css background-image gatsby gatsby-image

image1

我的背景图片加载不出来!谁能告诉我发生了什么事?是因为 Gatsby 吗?我应该改用 gatsby-image 吗?

    background-image: url('/src/components/images/header.png');
    background-size: cover;
    background-position: center;
    width: 100%;
  }

<div id="page">
     <div className='header'>
        <h1>Header</h1>
      </div>
      <div>
        <h1>About</h1>
      </div>
      <div>
        <h1>Projects</h1>
      </div>  
     </div>

最佳答案

我们实际上没有您的代码,因此我们不知道您使用的是哪个代码。但我们确实知道哪些代码有效,如下所示:

.header {
  background-image: url("/image/YLMDq.jpg?s=48&g=1");
  background-size: cover;
  background-position: center;
  width: 100%;
}
<div class="header">
  <h1>Header</h1>
</div>

主要区别可能是在 CSS 中我使用了双引号。

关于css - 为什么背景图片加载不出来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58624439/

相关文章:

javascript - 如何将动态类添加到 Gatsby.js 中的 body 标签?

html - CSS HTML 选择器与类选择器

html - WEB 上的垂直间距?

javascript - 在小尺寸 div 容器中绘制 jqPlot 条形图

html - IE6 中 CSS 图像背景上的额外白色边框

javascript - 在 React Helmet/Gatsby 中插入自定义脚本

jquery - Bootstrap 3 自定义多级菜单无法正常运行

java - 如何在 JPanel 中刷新/重新加载图像

html - 如何使页面元素静态/悬停在它下面滚动的东西上方(我已经有一个静态背景)

javascript - 在 Gatsby : Invalid hook call 中 react Hook