Javascript 使用顶部div和底部div背景创建渐变，以在中间div中连接它们

我有三个div。顶部有一个背景图像设置为中心/封面。下面的那个全是白色的。我想对中间的div应用渐变背景，从顶部继续图像，并过渡到底部的白色。所讨论的图像在底部有不同的灰色细微差别，因此如果没有这一点，它会在顶部和中间div之间创建一个清晰的界限，我想删除它。有没有办法使用JS或CSS来实现这一点

HTML代码如下所示：

<div class="topdiv">
TITLE
</div>
<div class="middlediv">
REVIEWS
</div>
<div class="bottomdiv">
REST OF PAGE
</div>

.topdiv {
        height:100%!important;
background:url('some image that has different nuances of grey at the bottom.png') scroll no-repeat center/cover!important;
}

.middlediv {
background: #ffffff;
background: -moz-linear-gradient(continue topdiv image to white);
background: -webkit-linear-gradient(continue topdiv image to white);
background: linear-gradient(continue topdiv image to white);
    height:250px;
}

.bottomdiv {
background-color:#ffffff;
}

---

谢谢大家!

图像上的渐变可以近似如下：

.top，
.底部{
高度：200px；
宽度：300px；
}
.顶{
背景：
线性梯度（#0000 70%，#fff），
网址(https://picsum.photos/id/1/300/200)中心/盖；
}
.底部{
背景：#fff；
}
身体{
背景：黄色；
}