0

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

我已经涉足了。

position:relative;

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

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

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

1 回答 1

0

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

然后使用 ~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>
于 2012-07-27T22:21:01.773 回答