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

Question

我有一张地图图像 (1080x1080px)，我希望它作为正文或容器的背景 div。我需要图像始终固定在原位，即使在调整浏览器大小时也是如此 window.

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

背景图像（地图）和标记都需要永久保留在它们的位置。

我怎样才能做到这一点？我有什么不工作...

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>

Answer 1

如果您通过 PHP 动态拉取图像，我只会在 HTML 中加载背景图像。否则，您可以在 CSS 文件中创建带有背景图像的单独类。

fixed 和 cover 不能很好地结合使用，你必须将高度属性放在外部容器中，但我在 Chrome、Firefox、Safari 上测试了这段代码和 Opera，它运行良好。

Answer 2

div { 宽度：100% 身高：90vh 背景重复：不重复背景位置：中心中心背景尺寸：封面背景附件：已修复 } 。以连字符结束每个句子

Answer 3

您需要将 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>

Answer 4

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

backgroundimage 和 hyfin 之间的撇号结束它以获得图片

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

How to Fixed / Lock Position of Background Image & Divs Containing Images

html

css

position

image