标题上的背景图像未显示答案

【问题标题】：Background image on Header not showing标题上的背景图像未显示
【发布时间】：2019-04-09 20:57:34
【问题描述】：

我刚刚开始编写一份新文档来测试一些技能。为了尝试制作带有文本覆盖的英雄图像，其中包含号召性用语按钮，我的背景图像没有显示。

我知道它在那里，但它似乎被向上推了。当我检查元素并将填充设置为 200px 时，它会显示，但直接将代码放入文件中并不会显示出来。

//CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}

.row {
max-width: 1140px;
}

.header {
background: url(img/hero.jpg);
background-size: cover;
background-position:center;
}

.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

h1 {
  margin: 0;  
}

//HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/fluid-    grid.css">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
    <title>Test</title>
     </head>


    <body>
        <header>

            <div class="hero-text-box">
            <h1>Welcome to my site</h1>
            <a href="#">Call me</a>
            <a href="#">Show me more</a>

            </div>

        </header>

</body>



</html>

文件夹结构

+ index.htm
+ css
  + img
  + style.css
+ js
  + scripts.js
+ img
+ data

【问题讨论】：

标签： html css image background

【解决方案1】：

将.header 更改为header：

header {
  background: url(img/hero.jpg);
  background-size: cover;
  background-position: center;
}

图片缺失问题

改回img/hero.jpg。接下来你需要做的是关于hv。这是错误的。要么写成vh，也不支持，所以，更好用：

header {
    background-image: url(img/hero.jpg);
    background-size: cover;
    background-position:center;
    height: 100%;
    width: 100%;
    position: fixed;
}

预览

translate 是什么影响：

  transform: translate(0%, -50%);

查看输出：http://output.jsbin.com/furumogoxe

所以我也使用另一种方式对 CSS 进行了一些更改：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  height: 100%;
}

.row {
  max-width: 1140px;
}

header {
  background: url(img/hero.jpg);
  background-size: cover;
  background-position:center;
}

.hero-text-box {
  position: absolute;
  width: 1140px;
  max-width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  margin: 0;  
}

<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<header>
  <div class="hero-text-box">
    <h1>Welcome to my site</h1>
    <a href="#">Call me</a>
    <a href="#">Show me more</a>
  </div>
</header>

【讨论】：

啊，文本格式已排序，但我仍然无法加载图像。
@MatthewPeabody 请根据您的 CSS 路径保留图片。
我有一个 css 文件夹，里面有一个 img 文件夹，里面有英雄图像。当我在浏览器中检查它显示的元素时更改代码时，图像就在那里。
@MatthewPeabody 你能告诉我所有的路径吗？
我正式爱你！ :D 谢谢一百万！