如何将地图图标保持在作为背景图像的地图的相同位置？ CSS答案

【问题标题】：How would I keep a map icon in the same position of the map which is a background image? CSS如何将地图图标保持在作为背景图像的地图的相同位置？ CSS
【发布时间】：2020-09-21 00:01:43
【问题描述】：

Map Page

您好，我正在我的网站上制作地图，它需要有可以悬停的图标，这意味着它们不能与实际地图图像本身分开。

我想知道如何将图标放置在地图上，并以不同的视图宽度/高度将它们保持在地图上的相同位置。

这是我的地图背景的 CSS：

.background {
position:fixed;
padding:0;
margin:0;

top:0;
left:0;

width: 100vw;
height: 100vh;

background: url("../assets/map.png") no-repeat center center fixed;
-webkit-background-size: 100vw 100vh;
-moz-background-size: 100vw 100vh;
-o-background-size: 100vw 100vh;
background-size: 100vw 100vh;
}

地图会根据屏幕的分辨率改变大小，这让我很难通过屏幕更改将图标保持在同一位置。目前我尝试使用绝对位置并将其放在正确的位置，但是当您更改屏幕时，图标的位置也会发生变化。

是我做错了还是有其他解决方案？谢谢。

【问题讨论】：

您可以按百分比定义位置。 20% 始终是 20%，与像素值无关。

标签： css image background position background-image

【解决方案1】：

如果你想在背景上放置图标，那么你必须给背景容器一个相对位置，然后给背景容器内的元素一个绝对位置

body,
html {
    margin: 0;
    padding: 0;
}

.background {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-image: url('https://i.stack.imgur.com/KQxKh.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.icon1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: #45619D;
}

.icon2 {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    background-color: #45619D;
}

.icon3 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background-color: #4AC144;
}

.icon4 {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    background-color: #45619D;
}

.icon5 {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: #45619D;
}

<div class="background">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
    <span class="icon5"></span>
</div>

【讨论】：