如何获得标题图片上的链接？

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

您可以将背景图像分配给父元素，因此，所有子元素都将出现在背景前面。

另一种可能的解决方案是使用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>