0

所以我现在正在编写我的网站，我正在使用两个 div 在背景中创建一些渐变，其中 div#bg1 是灰色的，而 div#bg2 是深灰色的。但是当我添加包装器 div 时，bg1 和 bg2 仍然遵循包装器的顶部对齐，但它不应该。bg1 和 bg2 应该留在顶部。

继承人的html：

<div id="bg1"> </div>
<div id="bg2"> </div>
    <div id="wrapper"></div>

和样式表：

div#wrapper {
  background-color: #FFFFFF;
  width: 800px;
  height: 1000px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 30px;
  position: relative;
  z-index:3;
}

div#bg1 {
  width: 100%;
   margin:0px;
   padding:0px;
  height: 200px;
  background-color: #ccc;
  z-index: 2;
  position: absolute;
  box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.6);
}

div#bg2 {
  width: 100%;
   margin:0px;
   padding:0px;
  height: 100px;
  background-color: #444444;
  z-index: 2;
  position: absolute;
  box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.7);
}

我目前在我的网站上有代码：http: //andreassvarholt.com/test/test3/

4

2 回答 2

0

您将两个 BG div 设置为绝对位置。

要将它们强制到顶部，您需要定义“顶部”CSS 属性。

  div#bg1 {
    top: 0;
  }

  div#bg2 {
    top: 0;
  }

此外，我必须指出您的实现不优雅。只需制作一个 1 像素 x 200 像素的图像，作为背景图像平铺在身体上。将 div 堆叠在 div 之上只是为了一个简单的背景效果是没有意义的。

于 2012-08-21T19:32:44.137 回答
0

使用 div 来创建背景渐变有点奇怪。为什么不直接使用在线提供的众多免费 css3 渐变生成器之一。自由而轻松。

祝你好运
-布赖恩

于 2012-08-21T19:33:41.393 回答