代码之家 › 专栏 › 技术社区 › Norbert Pushparaj Yuvaraj

顶部容器背景问题

css background-image background html

Norbert Pushparaj Yuvaraj · 技术社区 · 16 年前

以下是截图:

header http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png

左边的红色条是我为#personal div设置的背景,我希望它与容器顶部垂直对齐。

问题是,我有一个背景的#容器顶div上的#容器顶div的绝对定位。有没有办法把“个人”分区调高,这样就没有空间了?

<div id="container">
  <div id="container-top"></div>
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
</div> <!-- end #container -->

CSS格式

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  margin: 40px auto;
  position: relative;
}

#container-top {
  background: url(images/bg-top.png) no-repeat top center;
  position: absolute;
  height: 12px;
  width: 835px;
  top: -12px;
} 

#container-bottom {
  background: url(images/bg-bottom.png) no-repeat top center;
  position: absolute;
  height: 27px;
  width: 835px;
  bottom: -27px;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
}

3 回复 | 直到 16 年前

digitaldreamer 16 年前

除非我遗漏了什么,否则我会看到你发布的内容产生了你想要的结果。

yahoo user interface css reset 或 Eric Meyer's reset CSS

浏览器可能有一些默认的填充和边距。

Kyle 16 年前

更改以下CSS:

    #personal {
  background: url(images/personal-info.png) no-repeat 0px left;
position: relative;
top: 0px;
left: 0px;
}

你需要 position 这个元素 relative 给它的父母; container ,使它适合你想要的地方。这个 top 和 left 左上角 父母的 div

#personal {
      background: url(images/personal-info.png) no-repeat 0px left;
    margin-top:-10px; /*px value that works*/
    }

ANeves 16 年前

[编辑:修改]

HTML格式:

<div id="container">
  <div id="container-inner">
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
  </div> <!-- end #container-bg -->
</div> <!-- end #container -->

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  /*margin: 40px auto;*/
  margin: 28px auto 40px auto;
  position: relative;
}

#container-inner {
  background: url(images/bg-top.png) no-repeat top center;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
  padding-top: 12px;
}

这符合你的愿望吗?

推荐文章