使用 css 将图像放置在背景图像上作为响应

Question

我有一个像图表一样的电路块作为背景图像。

我需要在各个地方放置单独的图像。

当前成绩：

.container {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.coil, .evaporator, .compressor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evaporator {
    width: 80px;
    height: 80px;
    margin-top: 70px;
    margin-left: 90px;
}

.coil {
    width: 150px;
    height: 150px;
}

.compressor {
    width: 80px;
    height: 80px;
    margin-bottom: 40px;
}

<div class="container">
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>

预期结果：

预期的结果是，

试过的代码，

  .coil {
    position: absolute;
    left: 25%;
    top: 55%;
  }

但它并没有给出确切的预期结果。使用

position:absolute

不会提供响应式设计。

你能帮我以动态方式实现结果吗，比如在 CSS 中使用 grid 或 flexbox？提前致谢。

Answer 1

试试这个：

.container {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 400px;
    background-position: center;
    background-size: contain;
    width: 700px;
}
.coil {
    position: absolute;
    top: 204px;
    left: 180px;
    zoom: 101%;    }
.evaporator {
    position: absolute;
    top: 26px;
    left: 320px;
    zoom: 121%;
}
.compressor {
    position: absolute;
    top: 220px;
    left: 422px;
    zoom: 100%;
}

<div class="container">
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>;

Answer 2

作为一个选项。但是，请记住，这是一个具有硬编码坐标的结构。当您使用背景图像更改容器的大小时，您还需要更改嵌套元素的位置。

<style>
  .container {
    background-image: url("https://i.stack.imgur.com/AfygH.png");
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
    border: 2px solid crimson;
    margin: auto;
    position: relative;
  }
  
  .container div {
    border: 2px solid orange;
    position: absolute;
  }
  
  .coil {
    top: 256px;
    left: 36px;
  }
  
  .evaporator {
    top: 40px;
    left: 296px;
  }
  
  .compressor {
    top: 272px;
    left: 333px;
  }
</style>
<div class="container">
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>

Answer 3

也许是这样？

<style>
  .container {
    background-image: url("https://i.stack.imgur.com/AfygH.png");
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
    border: 2px solid crimson;
    margin: auto;
    display: flex;
    align-items: center;
    /* position: relative; */
  }
  
  .container div {
    border: 2px solid orange;
    /* position: absolute; */
  }
  
  .coil {
    margin-top: 111px;
    margin-left: 33px;
  }
  
  .evaporator {
    margin-top: -343px;
    margin-left: 140px;
  }
  
  .compressor {
    margin-top: 170px;
    margin-left: -49px;
  }
</style>
<div class="container">
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>

Answer 4

这里是 flexbox 的解决方案，而不是根据要求将其设置为 position:absolute 。

.container {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 400px;
    background-position: center;
    background-size: contain;
    width: 700px;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.coil, .evaporator, .compressor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evaporator {
    width: 80px;
    height: 80px;
    margin-top: 23px;
    margin-left: 140px
}

.coil {
    width: 150px;
    height: 150px;
    margin-top: 60px;
    margin-right: 231px;
}

.compressor {
    width: 80px;
    height: 80px;
    margin-bottom: 88px;
    margin-left: 218px;
    margin-top: -90px;
}

<div class="container">
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>

Answer 5

因为它是位图图像，我建议回到每个元素的实际大小，并根据它们的实际大小定位它们。所有这些都以像素为单位。如果真的需要调整外部容器的大小，可以或多或少地对每个元素的大元素及其左上角的位置进行相同类型的计算...

.container {}

.circuit {
  position: relative;
  width: 100%;
  height: 100%;
}

.circuit>img {
  /* 688 x 401 */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 688px;
  height: 401px;
}

.coil {
  /* 120 x 90 */
  position: absolute;
  z-index: 1;
  width: 120px;
  height: 90px;
  left: 150px;
  top: 199px;
}

.evaporator {
  /* 80 x 70 */
  position: absolute;
  z-index: 1;
  left: 375px;
  top: 25px;
  width: 80px;
  height: 70px;
}

.compressor {
  /* 90 x 120 */
  position: absolute;
  z-index: 1;
  left: 405px;
  top: 213px;
  width: 90px;
  height: 120px;
}

<div class="container">
  <div class="circuit">
    <img src="https://i.stack.imgur.com/AfygH.png" alt="circuit" />
    <div class="evaporator">
      <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
    </div>
    <div class="coil">
      <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
    </div>
    <div class="compressor">
      <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
    </div>
  </div>
</div>