Imej PNG responsif pada imej latar belakang?

Question

Saya cuba membuat reka bentuk halaman seperti ini: Klik

Sebenarnya, saya berjaya. Masalahnya ialah apabila saya menukar resolusi halaman web, elemen bertindih, div latar belakang dan PNG berkelakuan berbeza dan semuanya kelihatan mengerikan. (Saya telah cuba menggunakan position:absolute(PNG) dan position:relative(background))

Answer 1

Anda boleh menggunakan sifat CSS saiz latar dan kedudukan latar belakang. Anda patut mencuba cara ini:

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%;
}