导航栏的文字标志问题，背景颜色被切断

Question

我的标题区域中的徽标会截断标题区域的整体背景色。我正在尝试将我的徽标与背景颜色嵌套在一起。

例如，cybertrongames.com在页面的左上角有他们的标志。

这是我用于我的徽标的图像：网站徽标

* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.header-container {
background-color: aquamarine;
}
.logo-pic {
display: block;
}
.logo-pic img {
position: relative;
height: 250px;
}
.nav-links {
position: relative;
list-style: none;
text-align: center;
}
.nav-links li {
display: inline-block;
padding: 0px 150px 0px 150px;
}

/* This controls that specific A tag items in NAV-Links , in other words the link itself. */
.nav-links a {
text-decoration: none;
padding: 20px;
cursor: pointer;
}
.nav-links a:hover {
background-color: black;
border-radius: 10px;
transition: 0.5s;
}

<div class=" header-container">
<div class="logo-pic">
<img src="/Website Logo V2].png" alt="Logo for website , Picture of a tidal wave">
<!-- Can style the indivudal logo-->
</div>
<div class="nav-links">
<nav>
<ul>
<!-- can style the individual links or options-->
<li><a href="##"> Home </a> </li>
<li><a href="##"> Game Reviews </a> </li>
<li><a href="##"> Game Watchlist  </a> </li>
</ul>
</div>
</nav>
</div>

请让我知道你对我可能做错了什么的见解。还有什么特定的软件或文件类型你使用的图像服务的标志？

我在用mac。

Answer 1

看起来您使用的图像没有透明背景。更好的方法是使用具有透明背景的图像，或者使用css属性混合混合模式作为解决方案

.logo-pic img {
mix-blend-mode: darken;
}