如何将é‡å çš„图åƒç»‘定到基础图åƒçš„特定部分?

时间:2018-12-26 12:16:08

标签: html css responsive-design

对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 个答案:

没有答案