Warum werden meine Bilder auf meiner Website nicht angezeigt?

Question

Ich versuche eine animierte Fußzeile zu erstellen. Ich versuche, ein Bild in meinen Code einzufügen, aber es wird nicht angezeigt.

Bearbeiten Ich habe versucht, den Code gemäß den Anweisungen zu bearbeiten, aber das Bild wird immer noch nicht angezeigt. Meine CSS-Datei befindet sich im selben Ordner wie wave.png, aber wave.png befindet sich in einem anderen Ordner innerhalb desselben Ordners. Ich bin mir nicht sicher, ob das das Problem ist. Bei Bedarf kann ich auch meinen gesamten Code anzeigen

footer .wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: #f00 url(wave.png);
  background-size: 1000px 100px;
}

<footer>
  <div class="waves">
    <div class="wave" id="wave1"></div>
    <div class="wave" id="wave2"></div>
    <div class="wave" id="wave3"></div>
    <div class="wave" id="wave4"></div>
  </div>
</footer>

Answer 1

编辑

footer .wave

至

.waves .wave

删除

background: #f00 url(wave.png);

添加

background-color: #f00;
background-image: url(wave.png);

确保您的 wave.png 与 css 文件位于同一目录/文件夹中，如果您的 css 文件位于（例如）css/ 文件夹中并且图像位于 /images 文件夹中，则必须更改 url至

background-image: url(../images/wave.png);