Html/css: 将元素放在重复的背景后面

Question

我正在尝试找到一种方法，将导航栏放在一些重复的背景图像后面。这里是：

基本上，我希望在重复的植物图像后面有一个导航栏，但在太阳图像的前面。我将在鼠标悬停时弹出导航元素。这是我的 css header:

header {
  height: 250px;
  width: 100%;
  background-image: url("top.png"), url("banner.png");
  background-repeat: repeat-x, no-repeat;
  background-size: auto 40px, cover;
  background-position: bottom;
}

Answer 1

我会推荐 z-index。来自 W3Schools：

"z-index 属性指定元素的堆叠顺序。

具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。"

元素的z-index越大，元素越靠前

Answer 2

部分解决方案是使用 z-index，正如 Howzieky 提到的，但没有提供示例。这是我的做法：

css:

header {
    height: 250px;
    width: 100%;
    position: relative;
}

#background-far {
    height: 250px;
    width: 100%;
    background-image: url("banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#header-body {
    height: 250px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#background-close {
    height: 250px;
    width: 100%;
    background-image: url("top.png");
    background-repeat: repeat-x;
    background-size: auto 40px;
    background-position: bottom;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

html:

<header>
    <div id="background-far"></div>
    <div id="header-body">
        <img src="logo.png"/>
    </div>
    <div id="background-close"></div>
</header>

我还需要将 header 分成 3 个部分（background-far、header-body 和 background-close）。 Header body 将存储我将在 header 中拥有的所有内容，例如我的导航栏。重要的部分是让 header 使用 position: relative 并且每个部分使用 position: absolute; top: 0; left: 0;

感谢大家的帮助！

Html/css: 将元素放在重复的背景后面

Html/css: Put elements behind a repeating background

html

css

background-image

repeat