HTML将单个背景图像分成两个相等的链接（顶部和底部）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML将单个背景图像分成两个相等的链接（顶部和底部）相关的知识，希望对你有一定的参考价值。
我只是在学习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>
提前致谢！
答案
我创造了一些可以满足您需求的东西。它有以下限制：
- 您需要知道您正在使用的图像的高度（以像素为单位），并将上半部分编码为正好数量的一半。当我使用％时，我最终将顶部链接大于底部。我没有做太多的游戏来试图解决这个问题。
- 实际上图像被加载了两次，所以如果你的图像非常大，这可能是你的一个问题。
* {
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>另一答案
只需将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>另一答案
这是一个简单的示例：
<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标签。
以上是关于HTML将单个背景图像分成两个相等的链接（顶部和底部）的主要内容，如果未能解决你的问题，请参考以下文章