Question

我正在尝试将一些图像放置在另一个图像（背景圆圈）上。此图片的位置必须相对于当前图片的大小背景图片（响应）。我该如何实现？直接使用相对位置定位图像？

我目前所拥有的： HTML：

<main>
    <img src="bg-image.png" id="bg-image" class="clear">
    <div></div>
</main>

注意：如果我放置而不是图像，则不会显示。我不知道为什么。

CSS：

main {
    background: #f9f9da;
    display: block;
    position: relative;
    height: 100%;
    width: inherit;
    padding-bottom:0;
    text-align: center;
}

img {
    height: 100%;
    width: auto;
}

这很好。我得到的图像具有响应性，可以自动调整大小以适合屏幕，而不会拉伸。

但是下一步是在＃bg-image相对的某些位置放置图像，例如：左上角，中心等。

我该怎么做？预先感谢。

Answer 1

我不确定是否了解，但这是吗？

图片的位置相对于＃bg-image的包装

https://codepen.io/anon/pen/qJZWev

<main>
  <div id="wrapper">
    <img src="http://blog.visme.co/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-03.jpg" id="bg-image" class="clear">
    <div id="other-images">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" />
    </div>
  </div>
</main>

main {
  background: #f9f9da;
  position: relative;
  text-align: center;
}

#bg-image {
  height: 100vh;
  max-width: 100%;
  object-fit: cover;
  width: auto;
}
#wrapper {
  display: inline-block;
  position: relative;
}

#other-images {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}

#other-images img {
  max-width: 50%;
}

相对于其他图像的图像具有响应性

1 个答案: