Javascript HTML将单个背景图像拆分为两个相等的链接（顶部和底部）_Javascript_Html_Css_Html5 Canvas

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

javascript html css html5-canvas

Javascript HTML将单个背景图像拆分为两个相等的链接（顶部和底部）,javascript,html,css,html5-canvas,Javascript,Html,Css,Html5 Canvas,我只是在学习HTML。有没有一种方法不使用图像映射将背景图像分割为50-50%，每一半链接到一个外部链接？我使用style=0%和50%将链接分为顶部50%和底部50%，但它不会将图像一分为二这就是我所拥有的： <!DOCTYPE html> <html> <head> <title>Page 2</title> <link href="https://fonts.googleapis.com/css?fami

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


第2页

提前谢谢

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

您需要知道正在使用的图像的高度（以像素为单位），并将上半部分编码为该数量的一半。当我改用%时，我的顶部链接比底部链接大。我没有做太多的游戏来试着摆脱它
图像实际上加载了两次，因此如果您的图像非常大，这可能会引起您的关注

*{
边际：0px；
填充：0px；
}
.顶{
高度：200px；
溢出：隐藏；
位置：绝对位置；
z指数：2；
}
.底部{
位置：绝对位置；
}

我已经创建了一些可以满足您需要的功能。它有以下限制：

您需要知道正在使用的图像的高度（以像素为单位），并将上半部分编码为该数量的一半。当我改用%时，我的顶部链接比底部链接大。我没有做太多的游戏来试着摆脱它
图像实际上加载了两次，因此如果您的图像非常大，这可能会引起您的关注

*{
边际：0px；
填充：0px；
}
.顶{
高度：200px；
溢出：隐藏；
位置：绝对位置；
z指数：2；
}
.底部{
位置：绝对位置；
}

只需通过css将

img

作为

背景图像

，然后将链接放置在具有该背景图像的容器顶部：

。拆分链接图像{
高度：400px；
背景：透明url(http://placekitten.com/400/400)不重复0；
背景尺寸：封面；
宽度：400px；
位置：相对位置；
}
.分割链接图像a{
位置：绝对位置；
左：0；
右：0；
身高：50%；
显示：块；
}
.分割链接图像a：第一个子对象{
排名：0；
}
.分割链接图像a：最后一个子对象{
底部：0；
}

只需通过css将

img

作为

背景图像

，然后将链接放置在具有该背景图像的容器顶部：

。拆分链接图像{
高度：400px；
背景：透明url(http://placekitten.com/400/400)不重复0；
背景尺寸：封面；
宽度：400px；
位置：相对位置；
}
.分割链接图像a{
位置：绝对位置；
左：0；
右：0；
身高：50%；
显示：块；
}
.分割链接图像a：第一个子对象{
排名：0；
}
.分割链接图像a：最后一个子对象{
底部：0；
}

这是一个简单的示例：

<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

，我使用背景色作为链接的包装；您必须使用

背景图像：url（ImageAddress）
另外，您不需要a
标记的border
。
这是一个简单的示例：
<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
，我使用背景色作为链接的包装；您必须使用背景图像：url（ImageAddress）
另外，您不需要标签的边框
。
使用图像地图是不推荐使用的标签。使用CSS将元素居中。使用图像映射是不推荐使用的标记。使用CSS使元素居中。