Question

我想将一个分区堆叠在另一个分区上，每个分区具有不同的背景。背景，当然是透明的（.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之下？

Answer 1

您需要像Demo

那样为#secondLayer提供宽度和高度

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

Answer 2

你是否想要这样做 -

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

Demo

Answer 3

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

检查图像路径，是否可以使用IMG标记中的相同图像路径加载相同的图像？

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

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

希望这有帮助。

将多个<div>层叠在一起，每个<div>具有不同的背景</div>

3 个答案: