Question

我无法显示英雄图像和背景。这些文件位于同一文件夹中，其中包含图像，css和javascript文件夹。 HTML在主文件夹中，其他是子文件夹。我正在使用我在w3schools上找到的看起来应该可以工作的代码，但是我无法显示图像。备用背景颜色确实显示。

我阅读了几个建议删除“，在路径名上添加/或... /的线程，我检查了文件名和扩展名，但无济于事。

我做错了什么？

这是我的代码：

html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  background-image: url("/images/funky-lines.png");
  background-color: #cccccc;
}

.hero-image {
  background-image: url("/images/the-road.jpg");
  background-color: #cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

article,
aside,
footer,
header,
nav,
section {
  display: block
}

nav {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 36px;
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

b,
strong {
  font-weight: inherit
}

b,
strong {
  font-weight: bolder
}

small {
  font-size: 80%
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  margin: 0
}

menu {
  display: block
}

[hidden] {
  display: none
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dorcraft Industries | Fallout 4</title>
  <meta name="description" content="Discussion of Fallout 4">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css? 
    family=Indie+Flower|Rokkitt|Source+Sans+Pro:700" rel="stylesheet">
</head>

<body>
  <div class="hero-image">
    <div class="hero-text">
      <h1 style="font-size:50px">Dorcraft Industries</h1>
      <h3>in Fallout 4</h3>
    </div>
  </div>
  <!-- <header><img src="images/banner.jpg" alt="Dorcraft Industries banner 
    image">
    </header> -->
  <nav><a href="">Home</a> | <a href="">The Game</a> | <a href="">Characters</a> | <a href="">About Us</a></nav>
  <div>
    <p>Is anything working?</p>
  </div>

</body>

</html>

Answer 1

好的，我更改了链接，在URL前面添加了两个点（..），这似乎可行。我在W3Schools上看到的示例以及此处的答案都显示了三个点（...），但这是行不通的。

谢谢，这似乎已经解决了。

Answer 2

阅读您的帖子，您当前的文件夹结构如下。

folder/
  index.html
  css/
    style.css
  images/
    image1.jpg
    image2.jpg
    etc
  js/
    main.js

因此，当您尝试在CSS中使用任何图像时，应在指向该图像的所有URL前面添加../。这样可以确保文件从一个文件夹开始查找，而不是从当前文件夹开始查找。

即 background-image: url("../images/image1.jpg")

英雄形象未显示

2 个答案: