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

问题描述 投票：0回答：3

我只是在学习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>

提前致谢！

javascript html css html5-canvas
3个回答
0
投票

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

  • 您需要知道您正在使用的图像的高度（以像素为单位），并将上半部分编码为正好数量的一半。当我使用％时，我最终将顶部链接大于底部。我没有做太多的游戏来试图解决这个问题。
  • 实际上图像被加载了两次，所以如果你的图像非常大，这可能是你的一个问题。

* {
  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>
1
投票

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

.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>
1
投票

这是一个简单的示例：

<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-image:url(imageAdress);而且你不需要border的a标签。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.