html - 如何制作自由形式的图像，导航栏的背景？

Question

我目前正在处理我网站的导航栏。导航栏的背景图片是一张 2"的纸，被撕到页面底部，背景图片的其余部分保持透明。由于它不是填充的正方形或矩形，它需要重叠下面的内容，这我正在努力。谢谢!非常感谢!我的个人资料照片就是我现在的感受。

我想要实现的目标的图片: Image 1

HTML

  <nav>
    <div class="topnav">
      <div id="logo-img">
        <a href="#">
          <img src="img/xsfiller.png" alt="Forever in the Stars Logo">
        </a>
      </div>
      <div id="menu-icon">
        <i class="fas fa-bars"></i>
      </div>
      <ul>
        <li>
          <a class="active" href="#">Our Vision</a>
        </li>
        <li>
          <a href="#">Digital Marketing Service</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>

CSS

nav{
}
.topnav{
  position: relative;
  display: flex;

  height: 100%;
  padding: 30px;

  justify-content: center;

  background-image: url('img/main/nav-bar-bckgrnd.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 100;
}
nav ul{
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  font-size: 20px;
}

/*The rest of the code is formatting the text and logo...*/

我的代码结果图片: Image 2

Answer 1

正确的版本如何响应地工作？您将需要让它在 x 轴上重复或拥有足够宽的图像以永远看不到尽头。我认为最好的方法是获取左对齐右对齐的重复图像，将导航高度设置为适合整个图像的任何高度，将背景设置为 100% 高度和自动宽度。 然后下面的div内容可以带负边距。 希望这能很好地解释它。