css - 背景图像居中，div 元素位置基于相对于主背景图像的百分比

Question

我有一个 CSS 背景图片，无论浏览器大小如何，它都会保持居中。使用的图像不会拉伸(stretch)浏览器的整个宽度。在这种情况下，我需要我也放置在带有背景图像和链接的 CSS 中的 div，以保持它们相对于背景图像的位置，无论浏览器大小如何，它们都保持居中。

我已经涉足了。

position:relative;

但它级联所有元素并且不允许我正在寻找的特定定位。这是我正在使用的代码。我感谢对我的新问题的任何见解，并期待了解它如何表现得更好。

当在不同大小的浏览器上查看此代码时，背景图像不会跨越整个宽度，元素会四处移动，因为它们被设置为百分比。我需要他们留在原地，但仍以背景为中心。我不确定如何用 CSS 编写它并且已经为此苦苦挣扎了一段时间。感谢您提供有关此特定问题的任何指导。

body {
    background:#000 url(bg.jpg) no-repeat center 0;
}
#logo {
    margin: 0px 11%;
    padding: 0;
    position:absolute;
}

Answer 1

尝试将要放在它旁边的元素分组到一个 div ~say container~ 并将背景设置为 div。然后将 div ~container~ 位置设置为 relative 并将其居中。

然后使用 position absolute 和 top bottom left right 属性 wrt ~container~div 对齐其他元素。

这是它的代码

 <div id="container">
     <div id="element1"></div>
     <div id="element1"></div>
 </div>

<style type="text/css">
  #container {
      background:#000 url(bg.jpg) no-repeat center 0;
      width: 800px; height: 400px
      position: relative;
      top: 50%; left: 50%;
      margin-top: -200px; margin-left: -400px }
  #element1 {
      position: absolute;
      top: -30px; left: -20px;}
  #element2 {
      position: absolute;
      top: 410px; left: 820px;}
</style>