Question

我想在背景上放一个徽标，但是当我放大和放大时，徽标一直在滑动。

.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>

Answer 1

您必须使用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>

Answer 2

也许这可以解决您的缩放问题：（在整页上使用（无响应））（您可以在CSS上添加“ @media only屏幕和（最大宽度767px）{这里是新CSS}”，以使其具有响应性

<!DOCTYPE html>
<html>

<head>
  <title>
    Disable Double-Tap to Zoom
  </title>

  <meta meta name="viewport" content="width=device-width, user-scalable=no" />

  <style>
    .top {
      position: absolute;
      left: 0%;
      top: 0%;
      z-index: -1;
    }
    
    .logo {
      position: absolute;
      left: 0%;
      top: 3%;
      z-index: 0;
    }
    
    h1.pos_what {
      display: flex;
      justify-content: center;
      font-size: 30px;
    }
    
    .inlet {
      padding: 5px;
    }
    
    img {
      max-width: 100%;
      height: auto;
    }
    
    h3 {
      font-size: 2.8rem;
      margin-block-start: 0em !important;
      margin-block-end: 0em !important;
      text-align: center;
    }
    
    .wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: no-wrap;
      justify-content: center;
      text-align: center;
    }
    
    .middlecaptivity,
    .middlelecture,
    .middleprotest {
      border-style: solid;
      margin-top: 20px;
      padding: 10px;
      font: bold;
      font-size: 20px;
      border-width: 1px;
    }
  </style>
</head>

<body>

  <div>
    <img src="https://dummyimage.com/400x400/666666/0011ff.png" class="top">
    <img src="https://www.crossmodal-learning.org/4034886/cml-logo-200x200-527600dd4d55892300f5b82bd80fc0918e4c070e.png" class="logo">
  </div>

  <h1 class="pos_what">WHAT DO WE DO?</h1>

  <div class="wrapper">
    <div class="inlet">
      <img src="https://dummyimage.com/400x400/666666/0011ff.png">
      <h3>Lecture</h3>
      <div class="middlelecture" onclick="location.href='lecture.html';" style="cursor:pointer;">READ MORE</div>
    </div>
    <div class="inlet">
      <img src="https://dummyimage.com/400x400/666666/0011ff.png">

      <h3>Captivity</h3>
      <div class="middlecaptivity" onclick="location.href='captivity.html';" style="cursor:pointer;">READ MORE</div>
    </div>
    <div class="inlet">
      <img src="https://dummyimage.com/400x400/666666/0011ff.png">
      <h3>Protest</h3>
      <div class="middleprotest" onclick="location.href='protest.html';" style="cursor:pointer;">READ MORE</div>
    </div>
  </div>
</body>

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

2 个答案: