Question

我正在学习HTML。有没有一种方法可以不使用图像映射将背景图像拆分为50-50％，而每半部分都链接到外部链接？我将style = 0％和50％划分为前50％和后50％的链接，但不会将图像一分为二。

这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
    <title>Page 2</title>

    <link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">

</head> 
<body>
  <div class="image">
  <center><img src="{% static 'picture.png' %}" alt="image" /></center>
    <a href="link1" style="top: 0%;"></a>
    <a href="link2" style="top: 50%;"></a>
  </div>
  </body>
</html>

谢谢！

Answer 1

只需通过CSS将img设置为background-image，然后将链接放置在具有该背景图像的容器顶部即可：

.split-link-image {
  height: 400px;
  background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
  background-size: cover;
  width: 400px;
  position: relative;
}

.split-link-image a {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  display: block;
}

.split-link-image a:first-child {
  top: 0;
}

.split-link-image a:last-child {
  bottom: 0;
}

<div class="split-link-image">
  <a href="#top"></a>
  <a href="#bottom"></a>
</div>

Answer 2

这是一个简单的示例：

<div style="position: relative; width:500px; height:500px; background-color: #667799">
    <a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
    <a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>

我的包装器是div，我使用background-color进行链接的包装器；您必须使用background-image:url(imageAdress); 另外，您不需要border标签中的a。

Answer 3

我创建了可以满足您需求的东西。它具有以下限制：

您需要知道正在使用的图像的高度（以像素为单位），并将上半部分编码为正好一半。当我改用％时，结束时顶部链接大于底部链接。我并没有做太多的事情来尝试解决这个问题。
该图像实际上已加载两次，因此，如果您的图像很大，这可能是您担心的问题。

* {
  margin: 0px;
  padding: 0px;
}
.top {
  height: 200px;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}
.bottom {
  position: absolute;
}

<a class="top" href="https://www.google.com"><img  src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>

HTML将单个背景图像分成两个相等的链接（顶部和底部）

3 个答案: