1

我想将一个部门堆叠在另一个具有不同背景的部门之上。背景当然是透明的（.png）。这是为了在图像上重新创建图案效果并避免加载整个 1366 x 768 图像。

我的html有点像这样

<body>
  <div id="firstLayer">
    <div id="secondLayer">
         <div id="mainContent">
          main page content 
         </div>
    </div>
  </div>
</body>

我有一个径向渐变body，#firstLayer包含主徽标，并且#secondLayer必须包含透明图案。

我第一次尝试 css 有点像这样

#secondLayer{
    background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
}

但模式根本没有出现。我怎样才能把它#secondLayer放在上面#firstLayer但就在下面#mainContent？

4

3 回答 3

1

您需要提供宽度和高度才能#secondLayer喜欢这个Demo

#secondLayer{
    background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
    width: 100%;
    height: 100%;
}
于 2012-11-01T12:05:00.873 回答
1

你想这样做吗 -

#firstLayer{ background: red; height: 500px; }
#secondLayer{ background: green; opacity: 0.6; filter:alpha(opacity=60); height: 300px; }

演示

于 2012-11-01T12:05:53.600 回答
1

如果您没有 DIV 内容，则绝对需要宽度和高度。如果这不能为您解决问题：

检查图像路径，您可以在 IMG 标签中使用相同的图像路径加载相同的图像吗？

您的样式表是内联的还是作为单独的文件加载的 - 这将影响图像文件的相对路径。

您的网络服务器区分大小写吗？您的路径大小写是否与图像匹配？

希望这可以帮助。

于 2012-11-01T12:08:36.303 回答