2

我正在尝试使用绝对 div 作为我的背景（仅在某些页面上..我不能为此目的使用 body）

但是我无法将其扩展到页面底部。请帮忙。

黑色背景仅在页面中间。注意我的小提琴

http://jsfiddle.net/z9Unk/317/

CSS

.background {
  position:absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
  background:black;   
}

.container {
  height: 100%;
  width:100%;
}

.item {
    width:100px;
    height:100px;
    border:1px solid red;
}

HTML：

<div class="background">
    Hover Me
</div>

<div class="container">
    <div class="item">
   </div>
    <div class="item">
   </div>
    <div class="item">
   </div>
    <div class="item">
   </div>
    <div class="item">
   </div>
    <div class="item">
   </div>
    <div class="item">
   </div>
    <div class="item">
   </div>

</div>
4

3 回答 3

4

你想要的是position: fixed，不是position: absolute。看到这个 jsFiddle。

或者，为什么不设置background-color你的<body>?

于 2013-09-19T22:54:06.503 回答
3

利用position: fixed;

演示http://jsfiddle.net/kevinPHPkevin/z9Unk/322/

.background {
  position:fixed;
  width: 100%;
  height: 100%;
  z-index:-1;
  background:black;   
}

如果您仍想使用position: absolute;，则需要body将position: relative;

演示http://jsfiddle.net/kevinPHPkevin/z9Unk/324/

body {
    position: relative;
}
于 2013-09-19T22:54:57.017 回答
1

我不能为此目的使用身体

为什么不？

只需在每个页面的 body 元素中添加不同的类或 id 并在 CSS 代码中定义不同的背景/背景图像！

您正在使用语义上不正确的表示标记。

PS：这是一个链接仅供参考Motive Web Design Glossary

于 2013-09-19T23:04:35.913 回答