HTML/CSS；如何制作此导航栏(aquablue one？左边是一个.png格式的徽标，它是如何突出背景的？

<nav>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</nav>

nav {
  background-color: aqua; /* 设置导航栏背景颜色为 aqua 蓝色 */
}

ul {
  list-style-type: none; /* 移除无序列表的默认样式 */
  margin: 0;
  padding: 0;
}

li {
  display: inline-block; /* 使列表项水平排列 */
}

a {
  display: block; /* 将链接元素变为块级元素，使其占据整个列表项的空间 */
  padding: 10px; /* 设置链接的内边距 */
  text-decoration: none; /* 移除链接的下划线 */
  color: white; /* 设置链接字体颜色为白色 */
}

a:hover {
  background-color: blue; /* 当鼠标悬停在链接上时，设置背景颜色为蓝色 */
}

<nav>
  <img src="logo.png" alt="徽标">
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</nav>

nav img {
  float: left; /* 将徽标向左浮动 */
  margin-right: 10px; /* 设置徽标右边的间距 */
}