Html 如何使用位于图像右侧的覆盖创建完整的背景图像

我尝试使用线性渐变属性将背景色添加到图像中，请注意不透明度设置为0.5。

如下所示

.形象{ 背景：向右线性梯度，rgba0,0,0,0%，rgba0,0,1 100%； } .图像img{ 位置：相对位置； z指数：-1； 垂直对齐：中间对齐； 显示：块； 宽度：100%； }

---

尝试此工具并生成所需的纵横兼容渐变

<div class="navbar" style"justify-content: center;">
<a href="#home" class="active">Home</a>
<a href="#news">About</a>
<a href="#contact">Find A Network</a>
<a href="#contact">Announcements</a>
<a href="#contact">Friends of the City</a>
<a href="#contact">Register with the City</a>
</div>
<!--About-->
<div>
<img src="Assets/about.png" id="about" class="img-fluid" 
alt="Responsive image">
</div>

<!--- Footer -->


#about{
background : linear-gradient(90deg,none 50%, #D4C11D 50%);
}