Question

对How to let one of two vertical elements' height depend on another?的跟踪

我想要一个播放\暂停按钮，该按钮位于我的图像上方，并且与基础图像的相同部分完全重叠。在我的示例中，那是企鹅左眼的中心。我尝试实现它：

function playPause() {
  if(document.getElementById('player').src.endsWith('dQ39oPh.png')) {
    document.getElementById('player').src = "https://i.imgur.com/r4My4Ep.png";
  }
  else {
    document.getElementById('player').src = "https://i.imgur.com/dQ39oPh.png";
  }
}

body { 
  background-image: url('https://i.imgur.com/sWfZ8nq.png');
  background-repeat: repeat;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.fg {
  display: grid;
  grid-template-rows: 1fr auto;
  margin: auto;
  height: 100vh;
}

.fg .text {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.text span {
  width: 100%;
  color: white;
  text-align: center;
  font-size: 10vmin;
  letter-spacing: 3px;
  text-shadow:  2px  2px 2px green,
                2px -2px 2px green,
               -2px  2px 2px green,
               -2px -2px 2px green;
}

.img #penguin {
  position: relative;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-height: 70vh;
  max-width: 90vw;
}

.img #player {
  position: absolute;
  bottom: 52%;
  left: 48.7%;
  transform: translateX(-48.7%);
  width: 1.3vw;
}

<html>
  <head>
    <link rel="stylesheet" href="styles.css"/>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div class="fg">
      <div class="text">
        <span>HNY19</span>
      </div>
      <div class="img">
        <img id="penguin" src="https://i.imgur.com/Ql8A585.png"/>
        <img id="player" onclick="playPause()" src="https://i.imgur.com/dQ39oPh.png">
      </div>
    </div>
  </body>
</html>

我的笔记本电脑（1920x969）上的视口看起来还可以，但是只要视口大小发生变化，定位就会变得混乱。我知道有一个简单的方法可以做到（一只企鹅的眼睛有玩耍的图像，另一只眼睛的企鹅有停顿的图像），但是有没有办法做到这种响应呢？

我也尝试过切片技术

<table cellpadding="0" border="0" cellspacing="0">
  <tr>
    <td><img src="img/penguin_0_0.png"></td>
    <td><img src="img/penguin_0_1.png"></td>
    <td><img src="img/penguin_0_2.png"></td>
  </tr>
  <tr>
    <td><img src="img/penguin_1_0.png"></td>
    <td><a href="#"><img id="player" src="img/penguin_1_1_play.png"/></a></td>
    <td><img src="img/penguin_1_2.png"></td>
  </tr>
  <tr>
    <td><img src="img/penguin_2_0.png"></td>
    <td><img src="img/penguin_2_1.png"></td>
    <td><img src="img/penguin_2_2.png"></td>
  </tr>
</table>

具有适当的切片图像，但是这种旧的切片方法似乎不适用于网格CSS。

如何将重叠的图像绑定到基础图像的特定部分？

0 个答案: