Javascript 具有彩色背景的图像和块之间的颜色过渡区域

我有一个分为两部分的屏幕，第一部分是一个图像，然后当你向下滚动时，屏幕上有一个带有文本和特定颜色背景的块

正如您在我的演示中所看到的，这个变化非常突然，我希望在图像和带有文本内容的div之间有一个sortav模糊。我该怎么做

const-App=（）=>{
返回(
我的知识来自于一位杰出的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家调味品lacinia quis vel.在帝国酒庄，在乌拉姆科珀百货公司，它是一种名副其实的调味品。
)
}
ReactDOM.render(
,
document.getElementById（'app'）
);
.wrapper{
宽度：300px；
高度：300px；
}
.英雄{
宽度：100%；
身高：100%；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
背景图像：url（“https://placekitten.com/1000");
}
.内容{
填充：10px；
填充顶部：20px；
背景色：红色；
}
尝试在图像顶部添加一个伪元素，并在其上应用背景渐变。我修改了你的例子来说明如何做到这一点


const-App=（）=>{
返回(
我的知识来自于一位杰出的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家调味品lacinia quis vel.在帝国酒庄，在乌拉姆科珀百货公司，它是一种名副其实的调味品。
)
}
ReactDOM.render(
,
document.getElementById（'app'）
);
.wrapper{
宽度：300px；
高度：300px；
}
.英雄{
位置：相对位置；
宽度：100%；
身高：100%；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
背景图像：url（“https://placekitten.com/1000");
}
英雄：之后{
内容：“；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：2em；
背景：rgb（255,0,0）；
背景：线性梯度（180度，rgba（255,0,0,0）0%，rgba（255,0,0,1）100%）；
}
.内容{
填充：10px；
填充顶部：20px；
背景色：红色；
}

 > p>你可以考虑掩码，它将对所有的图像和背景颜色
起作用。

const-App=（）=>{
报税表（<
div className='wrapper'>
<
div className='hero'>