背景圖像上的響應式 PNG 圖像？

Question

我正在嘗試製作這樣的頁面設計：點擊

事實上，我成功了。問題是，當我更改網頁的解析度時，元素重疊，背景 div 和 PNG 的行為不同，一切看起來都很糟糕。 （我嘗試過使用位置：絕對（PNG）和位置：相對（背景））

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