大家下午好
我正在为我的工作做一个小元素，他们要求我制作一张 map 并精确定位特定城市。我已经在我的电脑上完成了它，我试图确保当我将它加载到另一台电脑(例如他们的笔记本电脑)上时，这些点保持原位。我希望这是我想要做的事情的足够信息，因为这是我的第一篇文章。任何和所有帮助将不胜感激。
代码的基础是:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>States/Cities</title>
</head>
<style media="screen">
html,body{
background-color: #AADAFE;
}
.Vegasdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 246px;
left: 306px;
position: absolute;
z-index: 2;
}
.SaltLakedot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 88px;
left: 395px;
position: absolute;
z-index: 2;
}
.Phoenixdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 333px;
left: 386px;
position: absolute;
z-index: 2;
}
.statesMap{
padding-top:3%;
padding-left:12%;
position: absolute;
z-index: 1;
}
<img src="StatesGIMP.png" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot"></span>
<span class="SaltLakedot"></span>
<span class="Phoenixdot"></span>
最佳答案
这里发生了几件事。
首先，position: absolute; 是相对于其父容器的。因此，如果您将图像和圆点包装在包装器 div 中，则可以相对于此 .wrapper 定位圆点。此 .wrapper 需要 position: relative; 才能作为 position: absolute; children
其次，您需要用百分比定位点，以便它们随图像缩放
第三，我们应用一个transform: translate(-50%,-50%)，它是相对于自身的高度和宽度的。这将使点的中心成为我们定位的位置，这样当图像缩放时点的中心保持不变
此外，我们可以通过将通用规则移动到 .dot 类中来干燥您的 css
示例:https://codepen.io/tylerfowle/pen/MrwreX
HTML:
<div class="wrapper">
<img src="http://ontheworldmap.com/usa/usa-states-map.jpg" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot dot"></span>
<span class="SaltLakedot dot"></span>
<span class="Phoenixdot dot"></span>
</div>
CSS:
html,body{
background-color: #AADAFE;
}
.wrapper {
position: relative;
}
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
transform: translate(-50%,-50%);
}
.Vegasdot{
top: 48%;
left: 17%;
}
.SaltLakedot{
top: 37%;
left: 24.5%;
}
.Phoenixdot{
top: 60%;
left: 22%;
}
.statesMap{
width: 100%;
z-index: 1;
}
关于html - 保持 css 点到位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47821669/