背景图像上的响应式 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%;
}