时间戳

首页 > 解决方案 > 如何将图像放在另一个图像上？

html - 如何将图像放在另一个图像上？

问题描述

我想在我的背景上放一个标志，但是当我放大和缩小时它一直在滑落。

.top {
  height: 563px;
  width: 1000px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  position: absolute;
  top: 20px;
  left: 800px;
}
<div class="toplogo">
  <img src="css/elefant.png" class="top">
  <img src="css/logo.png" class="logo">
</div>

标签： htmlcss

解决方案

您必须使用 z-index。我很快做了一个例子。您也可以尝试第二个想法。对于缩放问题，您必须使用 '%' 而不是 'px' 我希望这会有所帮助

.top {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.logo {
  position: absolute;
  left: 325px;
  top: 150px;
  z-index: 0;
}
<div>
  <img src="https://img.purch.com/rc/696x392/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNS83OTIvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzM3MTM5NjAxNy5qcGc=" width="700px" class="top">
  <img width="50px" src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" class="logo">
</div>

.header {
  background-image: url('https://img.purch.com/rc/696x392/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNS83OTIvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzM3MTM5NjAxNy5qcGc=');
  width: 100%;
  Height: 400px;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
.logo {
margin: 150px 42.5%
}
<div class="header"><img width="15%" src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" class="logo">
</div>

推荐阅读