如何让地图图标保持在地图的同一位置，而地图是背景图片？CSS

Question

地图页面

嗨，我在我的网站上做了一个地图，它需要有可以悬停的图标，这意味着它们不能成为实际地图图像本身的一部分。

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

这是我的地图背景的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;
}

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

是我做错了还是有其他的解决办法？谢谢。

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