我怎样才能在我的 header 图片上获得 link？

Question

我真的需要你的帮助。这可能并不困难，但对我来说是初学者。这是我的代码：

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

header {
  display: flex;
  width: 90%;
  margin: auto;
  position: relative;
  align-items: center;
  padding-top: 10px;
}

.logo-container,
.nav-links {
  display: flex;
}

.nav-links {
  justify-content: space-around;
  list-style: none;
}

.nav-link {
  text-decoration: none;
  color: green;
}

img {
  max-width: 100%;
}

<header>
  <div class="head">
    <div class="logo-container">
      <img src="auge.jpg" alt="zum Üben">
    </div>
    <nav>
      <ul class="nav-links">
        <li><a class="nav-link" href="#">Startseite</a></li>
        <li><a class="nav-link" href="#">Produkte</a></li>
        <li><a class="nav-link" href="#">Mein Konto</a></li>
      </ul>
    </nav>
  </div>
</header>

这是目前的样子。（见下图）

这就是我想要的方式（还有下图）

Answer 1

您可以将 background-image 分配给父元素，因此，所有子元素都会出现在您的背景前面。

另一种可能的解决方案是使用 z-index：https://www.w3schools.com/cssref/pr_pos_z-index.asp

.header{
width: 100%;
height: 500px;
background-image: url("https://dummyimage.com/200x200");
background-position: 50% 50%;
background-size: cover;
}

.header{

display: flex;
flex-flow: row nowrap;
justify-content: space-between;

}

.item{
font-size: 20px;
cursor: pointer;

}

<div class="header">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

</div>

我怎样才能在我的 header 图片上获得 link？

How can i get the link on my header image?

html

css

css-position