如何使用 CSS 在导航栏上显示图像？

Question

我想使用 HTML 和 CSS 实现导航栏，我想将图像的一半放在导航栏上，如下图所示：

所以到目前为止我得到的是：

图像的一半位于导航栏下方，而不是显示在导航栏上方！

因此，我为导航栏添加了z-index: 1并为图像设置了z-index: 100 ，但它不起作用！

这是导航栏的CSS ：

.mynmenu {
  width: auto !important;
  z-index: 1;
  position: relative !important;
  padding-top: 10px;
  padding-right: 0px;
  padding-left:0px;
  width: auto;
  height: 60px;
 }

这是图像的CSS ：

.circle_image img {
width: 80px !important;
height: 80px !important;
position: absolute;
z-index: 100;
left: 20% !important;
top: -20px !important;
border-right: 8px solid #ffffff !important;
border-bottom: 8px solid #ffffff !important;
border-top: 8px solid #cccccc !important;
border-left: 8px solid #cccccc !important;
}

HTML 代码如：

谁能告诉我如何解决这个问题？？

• 谢谢

Answer 1

我不知道你开始了什么，但这里可以是一个引导程序的解决方案：

.html

<div class="row">
  <div class="col-5 border-bottom border-danger pr-2 align-middle">
    <ul class="d-inline-block">
      <li class="p-2">Self Storage</li>
      <li class="p-2">Moving Magazine</li>
    </ul>
  </div>

  <div class="col-2 p-3 your-image rounded-circle align-middle"></div>

  <div class="col-5 border-bottom border-danger pl-2 align-middle"></div>
</div>

.css

.your-image {
  background: url("…");
  object-fit: cover;
  height: 3rem;
}