我正在学习 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>
提前致谢!
最佳答案
只需通过 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>关于javascript - HTML 将单个背景图像拆分为两个相等的链接(顶部和底部)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51119576/