如何使用位于图像右侧的叠加层创建完整的背景图像

Question

<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%);
}

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

Answer 1

像这样

.image {
  background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}

.image img {
  position:relative;
  z-index: -1;
  vertical-align: middle;
  display: block;
  width: 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 class="image">
  <img src="https://images.unsplash.com/photo-1551158025-3c01098e3f16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" id="about" class="img-fluid" alt="Responsive image">
</div>