Как я могу получить ссылку на мое изображение заголовка? - PullRequest
Новая
       26

Как я могу получить ссылку на мое изображение заголовка?

0 голосов
/ 20 июня 2019

Мне действительно нужна твоя помощь. Это, наверное, не сложно, но для меня как для новичка это так. Вот мой код, который у меня есть: 

* {
  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>

Вот как это выглядит в данный момент. (См. Рисунок ниже)

enter image description here

А вот как я хотел бы иметь его (также рисунок ниже)

enter image description here

1 Ответ

0 голосов
/ 20 июня 2019

Вы можете назначить фоновое изображение родительскому элементу, поэтому все дочерние элементы будут отображаться перед вашим фоном.

Другим возможным решением было бы использование 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>
...