我有一个地图图像（1080x1080px），我希望它是主体或容器div的背景。即使调整浏览器窗口的大小，我也需要始终将图像固定在其位置。
我在主div容器内有div，这些div的图像是地图标记，这些图像已放置在特定位置，可以根据需要将其打开和关闭。
背景图像（地图）和标记都需要永久保持在其位置。
我该如何实现？我所拥有的不起作用...
body, html {
height: 100%;
}
#bg {
background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>在您通过PHP动态提取图像的情况下，我只会在HTML中加载背景图像。否则，您可以在CSS文件中使用背景图像创建单独的类。
固定和保护套不能很好地配合使用，您必须将height属性放在一个外部容器中，但是我在Chrome，Firefox，Safari和Opera上测试了此代码，并且工作正常。
我想让网站的某个部分具有一个div，该div的背景图像既有背景附件：固定的，又有背景尺寸：封面的，与图像的大小无关。这是多个固定的全屏背景图像div的有效示例。