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

Question

我目前正在网站的导航栏上工作。 导航栏的背景图像是一张2英寸的纸张，已撕向页面底部，其余背景图像保持透明。由于它不是实心正方形或矩形，因此需要与下面的内容重叠，我正在努力。谢谢！非常感谢！我的个人资料照片确实是我现在的感觉。

我要实现的图像 ： 图像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...*/

我的代码结果的图像 ： 图像2

Answer 1

正确的版本如何响应地工作？ 您将需要使它在x轴上重复，或者具有足够宽的图像以至于永远看不到末端。 我认为最好的方法是获取一个重复的图像，其中左侧与右侧匹配，将导航高度设置为适合整个图像所需的高度，将背景设置为100％高度和自动宽度。 然后，可以使底下的div内容带负边距。 希望能充分解释它。