html - 在背景图像的中心添加透明水平线

Question

我希望实现的透明线是这样的:

我最接近的是使用渐变:

渐变的CSS是:

.login {
    background: linear-gradient(transparent 20%, #aaaaaa, transparent 77%),  url("bg-image.jpg");
}

我只对获得相同的透明线感兴趣。 我该怎么办？

Answer 1

您可以按如下方式使用线性渐变:

.box {
  width:400px;
  height:200px;
  background:
  linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 0 50%/100% 50px no-repeat,
  url(https://lorempixel.com/400/200/);
}

<div class="box">

</div>