Responsives PNG-Bild auf Hintergrundbild?

Question

Ich versuche, ein Seitendesign wie dieses zu erstellen: Klicken Sie auf

Eigentlich ist es mir gelungen. Das Problem ist, dass sich die Elemente überlappen, wenn ich die Auflösung der Webseite ändere, sich das Hintergrund-Div und PNG unterschiedlich verhalten und alles schrecklich aussieht. (Ich habe versucht, position:absolute(PNG) und position:relative(background) zu verwenden)

Answer 1

您可以使用 background-size 和 background-position CSS 属性。你应该尝试这种方式：

body {
  background-image: url("your-bg-image.jpg");
  background-size: cover;
  background-position: center;
}

.responsive-image {
  background-image: url("your-image.png");
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 100%;
}