时间戳

首页 > 解决方案 > 如何将重叠图像绑定到底层图像的某个部分？

html - 如何将重叠图像绑定到底层图像的某个部分？

问题描述

如何让两个垂直元素的高度之一依赖于另一个？

我想要一个播放\暂停按钮，它放置在我的图像上，并且与底层图像的同一部分完全重叠。在我的例子中，那是企鹅左眼的中心。我尝试实现它：

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。

标签： htmlcssresponsive-design

解决方案

推荐阅读