如何固定/锁定包含图像的背景图像和div的位置

>我有一个地图图像(1080x1080px(我希望这是正文或容器div的背景。我需要图像始终固定在其位置，即使在调整浏览器窗口大小时也是如此。

我在主div 容器内有div，这些div 的图像是地图标记，这些标记已放置在特定位置，并根据需要打开和关闭它们。

背景图像(地图(和标记都需要永久保持其位置。

我怎样才能做到这一点？我所拥有的不起作用...

body, html {
height: 100%;
}
#bg {
background-image: url(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="xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>

您需要将width和height的#bg属性设置为与background-image大小相同。

body, html {
height: 100%;
}
#bg {
background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
height: 1080px;
width: 1080px;
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 { 宽度： 100% 高度：90VH 背景重复：不重复背景位置：中心中心背景尺寸：封面背景附件：固定 } .用 hyfin 结束每个句子

谢谢，但它不会发送我正在尝试找到一种发送简单语言编程的方法。您也可以在背景速记中编写此代码，然后只需将背景图像添加到div 并根据需要调整 height 属性即可。

背景图像和hyfin之间的撇号结束它以获得图片

相关内容

最新更新

热门标签：