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

Question

我有三个 div。顶部的背景图像设置为 center/cover。最下面的是全白的。我想在中间 div 应用渐变背景，从顶部延续图像并过渡到底部的白色。有问题的图像在底部有不同的灰色细微差别，所以如果没有它，它会在顶部和中间 div 之间创建一个清晰的界限，我想删除它。有没有办法使用 JS 或 CSS?

HTML代码如下：

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

CSS如下：

.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;
}

谢谢！

Answer 1

图像上的渐变可以近似为：

.top,
.bottom{
  height:200px;
  width:300px;
}
.top {
  background:
    linear-gradient(#0000 70%,#fff),
    url(https://picsum.photos/id/1/300/200) center/ cover;
}
.bottom {
  background:#fff;
}


body {
  background:yellow;
}

<div class="top"></div>
<div class="bottom"></div>

或者蒙版和一些重叠

.top,
.bottom{
  height:200px;
  width:300px;
}
.top {
  background:url(https://picsum.photos/id/1/300/200) center/ cover;
  -webkit-mask:linear-gradient(0deg,#0000 ,#000 50px);
}
.bottom {
  background:#fff;
  margin-top:-50px; /* same as the value inside mask */
}


body {
  background:yellow;
}

<div class="top"></div>
<div class="bottom"></div>

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

Use top div and bottom div backgrounds to create a gradient that connects them in middle div

javascript

css

gradient

background

image