html - 导航栏上的图像

Question

我正在尝试重叠覆盖两个 div 的图像。我不太确定如何为此设置位置属性并且想做什么。到目前为止，这是我的代码:

<!-- NAVIGATION -->

<div class="navigation">
    <div class="container">
        <div class="row">
            <ul>
                <li class="navLink">HOME</li>
                <li class="navLink">MENU</li>
                <li class="navLink">JOUW SMAAK</li>
                <li class="navLink">FOODTRUCK</li>
                <li style="padding-right: 0px;" class="navLink">CONTACT</li>
            </ul>
        </div>
    </div>
</div>

<!-- OPENING TIMES -->

<div class="opening-times">
    MAANDAG - VRIJDAG <span class="spacer"></span> 17:00 - 22:00
</div>

<!-- END OPENING TIMES -->

<!-- END NAVIGATION  -->

这是CSS。我想在导航部分和开放时间上放置一张图片。我会在所有内容上放置一个 span 并从那里开始吗？

    .navigation ul li {
    display: inline-block;
    padding-right: 4%;
    padding: 7.5px 2% 0;
    margin-left: 10%;
}


.opening-times {
    font-size: 125%;
    background-color: rgb(31, 39, 45);
    color: rgb(109, 120, 125);
    padding: 5px 0 5px;
    text-align: center;
}

.spacer {
    padding: 0 40px 0 40px;
}

Answer 1

你可以尝试这样的事情:

用图片包裹你想覆盖的元素:

<div class="cover">
  Elements to cover here..
</div>

然后添加这些样式使图像成为background-image:

.cover {
  position: relative;
}

.cover:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size:cover;
  background-image: url(https://placehold.it/100x100); /*Your image here*/
}

查看此 fiddle演示