Question

大家下午好，

我正在为我的工作开展一个小项目，他们让我制作一张地图并确定具体的城市。我已经在我的电脑上完成了它并且我试图确保当我将它加载到另一台PC（例如他们的笔记本电脑）上时，这些点保持不变。我希望这是我想要做的事情的足够信息，因为这是我的第一篇文章。任何和所有的帮助将不胜感激。

代码的基础是：

<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>

Answer 1

这里有几件事情。

首先，position: absolute;是相对于其父容器的。因此，如果将图像和点包装在包装div中，则可以相对于此.wrapper定位点。此.wrapper需要position: relative;才能充当position: absolute;子女的亲戚

其次，您需要使用百分比来定位点，以便它们随图像缩放

第三，我们应用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;
}

保持css点到位

1 个答案: