时间戳

首页 > 解决方案 > html：添加指向重叠图像的链接 [图片]

html - html：添加指向重叠图像的链接 [图片]

问题描述

在堆栈上进行了大量的试验和打磨，我（我们）设法让两个图像以一种非常具体的方式重叠：

(

这是这样实现的：

.container {
  width: 900px;
  margin: auto;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container_2 {
  position: relative;
  padding-top: 41.3%;
}

.imageContainer {
  width: 70%;
  position: absolute;
  top: 0;
}

.psuedoContainer {
  position: relative;
  padding-top: 59%;
}

.psuedoHolder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

img {
  height: 100%;
  width: auto;
}
<div class="centered">
  <div class="container">
    <div class="component">
      <div class="container_2">
        <div class="imageContainer" style="left: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: left;">
              <img src="./img/img_codemesomething.png" />
              <a href="page_appDev.html"/>
            </div>
          </div>
        </div>
        <div class="imageContainer" style="right: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: right;">
              <img src="./img/img_recordmesomething.png" />
              <a href="http://google.de"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如您所见，主要的两张图片（HTML）中包含两个链接。

但是，两者中只有一个在工作（谷歌没有）。这可能是因为一张图片有点“高于”另一张图片，因此永远无法点击下方的图片。至少它不能像现在一样被点击。

我将如何继续为两个图像添加一个链接，无论用户点击哪里，除了两个图像之间的白色部分，用户都会被定向到不同的页面？

谢谢 ：）

标签： htmlcss

解决方案

你可以用 a 标签包装图像

.container {
  width: 900px;
  margin: auto;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container_2 {
  position: relative;
  padding-top: 41.3%;
}

.imageContainer {
  width: 70%;
  position: absolute;
  top: 0;
}

.psuedoContainer {
  position: relative;
  padding-top: 59%;
}

.psuedoHolder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

img {
  height: 100%;
  width: auto;
}
<div class="centered">
  <div class="container">
    <div class="component">
      <div class="container_2">
        <div class="imageContainer" style="left: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: left;">
             <a href="https://stackoverflow.com/questions/55650192/html-add-link-to-overlapping-images-pic/55650729#55650729"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
              </a>
            </div>
          </div>
        </div>
        <div class="imageContainer" style="right: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: right;">
               <a href="https://stackoverflow.com/"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
            </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读