代码之家 › 专栏 › 技术社区 › Danny Lo

如何将重叠图像绑定到基础图像的某个部分?

responsive-design css html

Danny Lo · 技术社区 · 7 年前

后续行动 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中不起作用。