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

ctzwtxfj  于 2023-02-20  发布在  其他
关注(0)|答案(5)|浏览(222)
    • 此bounty已结束**。此问题的答案可获得+50声望奖励。奖励宽限期将在12小时后结束。Hello World正在查找规范答案：动态方式下使用网格或灵活框方法的解决方案是有帮助的

我有一个电路块像一个图表作为背景图像。
我需要在各自的地方放置单独的图像。

    • 当前结果：**
.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没有给出响应式设计。
你能帮我在动态的方式实现的结果，如使用网格或flexbox在CSS中？谢谢提前。

css

5条答案

按热度按时间
whlutmcx

whlutmcx1#

试试这个：

.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>;
赞(0）分享  回复(0）举报  2023-02-20
58wvjzkj

58wvjzkj2#

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

<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>
赞(0）分享  回复(0）举报  2023-02-20
vyswwuz2

vyswwuz23#

也许吧？

<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>
赞(0）分享  回复(0）举报  2023-02-20
9wbgstp7

9wbgstp74#

这里是解决方案的flexbox，而不是使它的位置：绝对的要求。

.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>
赞(0）分享  回复(0）举报  2023-02-20
bqucvtff

bqucvtff5#

因为它是位图图像，我建议回到每个元素的实际大小，并根据它们的实际大小来定位它们。所有这些都是以像素为单位。如果真的需要调整外部容器的大小，或多或少可以做相同的事情，采取每个元素的百分比，关于大的一个和它们的位置左上角相同的计算...

.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>
赞(0）分享  回复(0）举报  2023-02-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com